微信订阅号：Rabbit_svip
组件和组件之间的作用域是相互独立的。也就是说，数据是不能互通的。
组件和组件之间的传值关系有几种：
（父传子）父组件把数据传给子组件。
（子传父）子组件把数据传给父组件。
（平级传输）兄弟组件之间互传数据。
本节讲的是：父传子
父传子的过程中，用到的关键词是：props
过程如下
HTML代码
<div id="app">
<parent></parent>
</div>
<!--父组件-->
<template id="parent">
<div>
<child :message="msg"></child>
</div>
</template>
<!--子组件-->
<template id="child">
<div>
{{message}}
</div>
</template>
JS代码
/*子组件*/
Vue.component('child', {
template: '#child',
props: ['message']
})
/*建立Vue实例*/
new Vue({
el: '#app',
data: {
msg: 'Hello'
},
/*父组件*/
components: {
'parent': {
template: '#parent',
data() {
return {
msg: 'Hello'
}
}
}
}
})
在父组件中调用了子组件，可以看到 id 为 “parent” 的 template ，里面用了 parent ，而且在 parent 标签中插入了 “ :message ”，这里用了vue的指令（带语法糖的），全写应该是：v-bind:message。
因为我要传 data 里面的数据，所以用了v-bind。
如果只是传死数据，可以不用指令。
而在子组件里，用了 props 来接收 父组件 传过来的东西。
微信订阅号：Rabbit_svip
在子组件中，用 props 接收到的数据，在使用的时候，和调用 data 里的数据的用法是一样的。
props 接收的数据，应该用一个对象来接收，这里用了数组的方法。
父组件可以同时传多个不同的数据过来，在子组件这头用一个props接收，然后通过上面数组的方式，可以接收多个父组件传过来的数据。
