Vue2进阶——组件通信

一、props配置项

• 作用：组件间通信
• 传递数据

<Demo name="xxx"/>

• 接收数据

1. 只接收
props:['name']
2. 限制类型
props：{
	name:string
}
3.限制类型，必要性，指定默认值
props：{
	name:{
		type:string,  //类型
		required:true,  //必要性
		default:'老王'   //默认值
	}
}
3. 

备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。（因此v-model绑定的值不能是props传过来的值，因为props是不能修改的）

• 拓展：这种方式一般是父传子，要实现子传父，可以在father.vue中定义一个函数，然后通过儿子通过props接收，在适当的时机调用这个函数，将自己的参数传给这个函数，然后父亲就可以接收了。

二、组件自定义事件

• 通过父组件给子组件绑定一个自定义事件实现子给父传递数据
• 使用场景：A是父组件，B是子组件，B想给A传递数据，那么就要在A中给B绑定自定义事件（事件回调在A中）
• 绑定自定义事件

在子组件Demo中，若xxx被触发了，则父组件的test事件就会被调用
1.在父组件中
<Demo @xxx="test"/> 或 <Demo v-on:xxx="test"/>
2.在父组件中
<Demo ref="demo"/>
....
mounted(){
	this.$refs.组件名.$on(xxx,this.test)
}
3.若想让自定义事件只触发一次，可以使用once修饰符，或$once方法

• 触发自定义事件

this.$emit(xxx,数据)

• 解绑自定义事件

1.this.$off(xxx)
2.this.$off([xxx1,xxx2,xx3])解绑多个
3.this.$off()   解绑全部

• 组件上也可以绑定原生DOM事件，需要使用native修饰符，不然会认为是自定义事件。

<Demo @click.naitve="test"/>

• 注意，通过this.$refs.组件名.$on(xxx,this.test)绑定自定义事件时，回调test要么配置在methods中，要么用箭头函数，否则会出现this指向问题。

三、全局事件总线

• 作用：实现任意组件通信
• 安装全局事件总线

//在main.js中
new Vue({
	...
	beforeCreate(){
		Vue.prototype.$bus = this    //安装全局事件总线，$bus就是当前应用的vm
	}
	...
})

• 使用全局事件总线

1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
methods(){
	demo(data){...}
}
mounted(){
	this.$bus.$on('xxx',this.demo)
}
2.提供数据
this.$bus.$emit('xxx',数据)

• 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

四、消息订阅与发布

• 作用：实现任意组件通信。
• 使用：利用第三方库，安装pubsub：npm o pubsub-js
• 引入

import pubsub from 'pubsub-js'

• 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
	demo(data){...}
}
mounted(){
	this.pid = pubsub.subscribe('xxx',this.demo)
	//或者
	this.pid = pubsub.subscribe('xxx',(data)=>{
	
	})
}

• 提供数据

pubsub.publish('xxx'，数据)

• 最好在beforeDestroy钩子中，用Pubsub.unsubscribe(pid)去取消订阅