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发送的消息! }) },