官方文档介绍
组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。
在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
父组件和子组件的概念
先看一段代码：
<div id="example">
<!-- example是父组件的模板 -->
<!-- 定义一个组件child -->
<child></child>
</div>
//子组件
Vue.component('child', {
template: '<span>{{ message }}</span>'
})
父组件：可以将 #example元素认为是父组件的模板，它就是起着父组件的作用
子组件: 子组件在父组件的 template 属性或者模板中。
父组件数据使用Prop传递给子组件
传递固定数据
<!-- 将message数据传给子组件 -->
<child message="hello!"></child>
//子组件
Vue.component('child', {
//声明props,无props 无法将message传值给子组件
props: ['message'],
// 就像 data 一样，prop 也可以在模板中使用
// 同样也可以在 vm 实例中通过 this.message 来使用
//span是子组件
template: '<span>{{ message }}</span>'
})
动态Prop
与绑定到任何普通的 HTML 特性相类似，我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件：
<input v-model="parentMsg">
<br>
<!-- 使用v-bind动态传值给子组件 parentMsg是一个变量-->
<child v-bind:message="parentMsg"></child>
new Vue({
el: '#example',
data: {
<!-- 可在data中设置parentMsg -->
parentMsg: '你好'
})
关于这部分我的理解：我们通过修改input的值，因为双向数据绑定，于是修改了data中的parentMsg的值，因此child中的message也改变了，再通过前面说到的传递固定数据给子组件，完成动态数据的传递。
子组件通过emit将数据传递给父组件
<!-- 子组件向父组件传替数据 -->
<div>
<son v-on:cliclkMe="getMsgFromChild"></son>
<p>{{msg}}</p>
</div>
// 子组件
Vue.component('son',{
// 点击子组件 运行子组件的方法
template:'<button v-on:click="sendMsgToFather">我是子组件</button>',
//子组件的方法
methods:{
sendMsgToFather:function(){
//将事件向上传递给父组件
// emit 运行父组件的事件 ，第二个为函数的参数
// 事件名在这使用大写字母将不会被运行，
//浏览器会提示以“-”替代,将大写换成小也可运行
this.$emit('cliclkme','来自子组件的信息')
}
}
})
// 父组件
new Vue({
el: '#example',
data: {
msg:'msg'
},
//父亲的方法
methods: {
getMsgFromChild:function(data){
this.msg='拿到子组件给父亲(我)的信息：'+data;
}
}
})
过程分析
- button标签替换son,button有一个点击事件。
- 点击button，触发点击事件，运行子组件的sendMsgToFather函数。
- 在sendMsgToFather函数中，使用$emit触发事件，事件向上传递，出发父组件的clickMe事件,第二个参数作为clickme事件的参数。
- 将子组件的data作为参数传给父组件的getMsgFromChild函数，并运行。
注意： $emit()中事件名不能使用大写，浏览器会提示以“-”替代，我们将其全部换成小写也没问题。
