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

admin2024-05-15  0

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

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

文章目录

  • Vue2之借助中间实例及 o n 与 on与 onemit方法实现两个不相干的组件之间通信
  • 1. 认识 o n 和 on和 onemit方法
    • 1. $on
    • 2. $emit
    • 3. 使用案例
  • 2. 创建中间Vue实例
  • 3.创建ComponentA组件并提供方法
  • 4. 创建ComponentB组件调用方法
  • 5. 总结

1. 认识 o n 和 on和 onemit方法

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实例

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

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


import Vue from 'vue';

const myMethodProvider = new Vue();

export default myMethodProvider;

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

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

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

4. 创建ComponentB组件调用方法

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

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

5. 总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!