Vue实现组件间通信

1、property

在子组件props中定义定属性，使用时传递父组件data对象或常量值实现传值通信

2、事件传递

在子组件中通过$emit发送event第一个参数是事件名，第二个是消息内容，在父组件中通过v-on响应事件实现事件通信

3、事件监听

在子组件中通过$emit发送事件，在父组件的mounted钩子函数中获取到对应dom元素通过$on监听事件

4、发布消息与订阅

安装pubsub-js插件，npm install pubsub-js -s  可实现全局传参

pubsub.publishSync发送消息

pubsub.publishSync("sendMsg","这是A组件发布的消息！");

pubsub.subscribe订阅消息

pubsub.subscribe("sendMsg",(e,msg)=>{ console.log(e,msg);//sendMsg 这是A组件发布的消息！ })

5、使用事件总线

在main.js中挂载全局总线

Vue.prototype.$EventBus = new Vue()

在A组件中发送事件

this.$EventBus.$emit('sendMsg',"这是组件A发送的消息！")

在组件B中监听事件

mounted(){ this.$EventBus.$on('sendMsg',(msg)=>{ console.log(msg);//这是组件A发送的消息！ }) },