vue的props属性的理解

在我的理解中，props这个属性就相当于一个桥梁的作用，它是贯穿了父组件和子组件的桥梁，父组件可以通过props这个节点去传输数据到子组件，例子：

父组件的写法：

<template>
 <div>
 <h1>{{messags}}</h1>
 <child message="我是逐渐"></child> 
 <child v-bind:message="msg"></child>
 <child :message="a+b"></child>
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
	data() {
		return{
			a:1,
			b:110,
			messags:'你是谁',
			msg:'asdasd'+'====》'+Math.random(),
		}
	},
 components: {Child},
 
}
</script>

子组件的写法：

<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
	 props:[
		 'message'
	 ]
 }
</script>

结果：

从代码里面我们可以看出：

父组件向子组件传递了一些数据，例如：:message="a+b"，然后子组件通过props属性来接到这个数据，然后显示到<h3>{{message}}</h3>这个子组件的信息中，最后传递会父组件进行显示。