1-5 vue组件-非父子组件通信

通过单独的事件中心管理组件间的通信
将在各处使用该事件中心,组件通过它来通信

1、先设置Bus

var eventHub = new Vue()

然后在组件中,可以使用 on, $off 分别来分发、监听、取消监听事件

2、发送事件的组件

Vue.component('component-a',{
    template:'
组件A:
', data() { return { data1:'组件A的数据' } }, methods: { sendDataFromA() { eventHub.$emit('sendDataFromA',this.data1) } } })

3、组件内监听事件

Vue.component(' component-b',{
    template:'
组件B:

从组件A接收的字符串参数 {{msg}}

', data(){ return {msg:'默认值'} }, mounted() { var self = this eventHub.$on('sendDataFromA',function(data){ self.msg = data }) } })

你可能感兴趣的:(1-5 vue组件-非父子组件通信)