Vue2之借助中间实例及$on与$emit方法实现两个不相干的组件之间通信

Vue2之借助中间实例及$on与$emit方法实现两个不相干的组件之间通信

在Vue 2中，如果想要在两个不相干的组件之间调用方法，可以通过一个中间Vue实例来实现。这个中间实例可以利用$on和$emit来传递方法。

1. 认识$on和$emit方法

在Vue.js中，$on和$emit是用于在组件之间进行通信的两个重要方法。这两个方法结合起来可以实现父子组件之间、兄弟组件之间、甚至是跨级组件之间的通信。比如，一个父组件可以使用$emit触发一个事件，然后子组件可以使用$on监听这个事件，从而实现父子组件之间的数据传递和交互。这样的设计使得组件之间的通信更加灵活和高效。

1. $on

$on(eventName, callback)：这个方法用于在当前组件实例上监听一个自定义事件。。当某个组件内部调用$emit方法触发了对应的自定义事件时，该组件上的$on方法绑定的处理函数将会被调用。通常情况下，$on方法用于在父组件中监听子组件触发的事件，以便在父组件中做出相应的响应或处理。

2. $emit

$emit(eventName, [...args])：这个方法用于触发当前组件实例上的一个自定义事件，并传递数据给监听该事件的处理函数。通常情况下，$emit方法用于在子组件中触发事件，然后在父组件中通过$on方法监听该事件并做出相应的处理。

3. 使用案例

// 子组件
this.$emit('childEvent', eventData);

// 父组件
this.$on('childEvent', function(eventData) {
  // 处理事件
});

2. 创建中间Vue实例

以两个不相干的组件ComponentA和ComponentB为例，我们创建一个专门用于方法调用的中间Vue实例，然后在需要的地方注入这个实例来调用方法。

创建一个中间Vue实例，例如MyMethodProvider.js，内容如下

import Vue from 'vue';

const myMethodProvider = new Vue();

export default myMethodProvider;

3.创建ComponentA组件并提供方法

在ComponentA中提供被其他不相干组件的调用方法

// 导入中间组件
import MyMethodProvider from './myMethodProvider';

export default {
  methods: {
    componentAMethod() {
      console.log('来自ComponentA组件中的componentAMethod方法执行了');
    },
  },
  created() {
    MyMethodProvider.$on('callComponentAMethod', this.componentAMethod);
  },
};

4. 创建ComponentB组件调用方法

创建ComponentB组件并通过中间Vue实例调用ComponentA组件中的componentAMethod()方法

// ComponentB.vue
import MyMethodProvider from './myMethodProvider';

export default {
  methods: {
    callMethodFromComponentA() {
     //出发callComponentAMethod事件，调用ComponentB组件中的componentAMethod()方法
     MyMethodProvider.$emit('callComponentAMethod');
    },
  },
};

5. 总结

在这个例子中，ComponentA中的方法被注册到MyMethodProvider实例上，在ComponentB中通过MyMethodProvider实例触发callComponentAMethod事件来调用ComponentA中的componentAMethod()方法。这样就实现了两个不相干组件之间的方法调用。