在Vue中实现非父子组件之间灵活传值的两种方法

前端

2023-11-27 08:17:03

前言

在Vue.js中，父子组件之间的通信是通过props和$emit实现的。当父子组件嵌套关系较深时，这种通信方式可能会变得繁琐和难以管理。此时，非父子组件之间的通信就显得尤为重要。

非父子组件通信方法

在Vue.js中，实现非父子组件通信的方法主要有两种：

事件总线
provide/inject

事件总线

事件总线是一种常用的非父子组件通信方法，它通过创建一个中央事件管理器来实现组件之间的通信。我们可以通过向事件总线注册事件和监听事件来实现组件之间的通信。

以下是一个使用事件总线的例子：

// 创建一个事件总线
const eventBus = new Vue();

// 在子组件中注册事件
export default {
  mounted() {
    eventBus.$on('my-event', (data) => {
      // 处理事件
    });
  }
};

// 在父组件中触发事件
export default {
  methods: {
    triggerEvent() {
      eventBus.$emit('my-event', 'Hello from parent!');
    }
  }
};

provide/inject

provide/inject是一种通过在父组件中提供数据，然后在子组件中注入数据来实现组件之间通信的方法。这种方法在需要在多个组件之间共享数据时非常有用。

以下是一个使用provide/inject的例子：

// 在父组件中提供数据
export default {
  provide() {
    return {
      message: 'Hello from parent!'
    };
  }
};

// 在子组件中注入数据
export default {
  inject: ['message'],
  mounted() {
    console.log(this.message); // 输出: Hello from parent!
  }
};