组件与复用技术(下)

接上一篇组件与复用技术（上）

三、组件之间的通信（1）：props / $emit

1. 认识父组件和子组件
   ①父组件：在HTML中使用组件的代码被称为“父组件”。
   ②子组件：在JS中注册组件的代码被称为“子组件”。
2. 父组件向子组件的通信：
   ①数据从父组件传递给子组件。
   ②通过props来实现。
   ③通过props来实现的父组件向子组件的通信是“单数据流传递”。
   由于是单数据流传递，因此在子组件中不允许执行对props数据实现赋值的各种操作。
   解决方案：在子组件的data区再次定义一个普通变量，让各种赋值操作针对这个普通变量来实现。
   ④通过props传递过来的数据作为初始值且发生了变化或者重新赋值，则可以利用计算属性或者侦听属性来解决双向绑定的问题。
   ⑤通过props传递给子组件的属性：
   A、不能在子组件的methods方法中对props属性进行赋值。
   B、不能在子组件的表单元素中利用v-model双向绑定props属性。
3. 子组件向父组件的通信：
   ①数据从子组件传递给父组件
   ②通过父组件的自定义事件来实现
4. 自定义事件：
   触发自定义事件：this.$emit(‘自定义事件名’,参数);
   例：为<my-book></my-book>添加功能。单击“作者”，在控制台显示作者简介。

1、为父组件绑定自定义事件：
  <my-book @custom=“bookCustom” intro=“作者致力于…….”></my-book>
2、在Vue实例中设置bookCustom的方法：
   new Vue({
     methods:{
        bookCustom:function(introduce){
           console.log(introduce);
			}
		}
	})
3、在子组件中指定何时出发custom事件。
   Vue.component(‘my-book’,{
       template:‘<p @click=“authorClick”>’,
       props:[‘intro’],
       metho