Vue3 中的5种常见的组件传值方式，Vue3事件总线（无需插件）

1,087次阅读

Props：这是 Vue 中最常见的组件传值方式，即在父组件中定义 prop 并将数据传递给子组件。
Event Bus：可以通过事件总线在两个组件之间进行通信，即定义一个中央事件处理器，父组件和子组件通过它进行通信。
Provide/Inject：可以在父组件中提供数据，并在子组件中注入这些数据，从而实现组件传值。
Slots：可以在父组件中嵌入子组件，并在子组件中使用插槽传递数据。
Vuex：Vuex 是 Vue 官方推荐的状态管理工具，也可以用于组件之间的数据通信。

以上是 Vue3 中常见的组件传值方式，你可以根据实际需求选择合适的方式进行组件传值。

—

（在vue2中我们可以直接new Vue创建一个空组件作为事件处理中心并使用其$emit和$on订阅和发布事件，Vue3官方推荐使用vue3-eventbus插件，可我觉得就这个事，没必要多安装一个插件吧）

首先，需要创建一个事件总线的类（这是一个单例类，我们可以在任何需要的地方通过new获得唯一实例）：

// EventBus.js
export default class EventBus{
    static instance;

    constructor(){
        if(EventBus.instance instanceof EventBus){
            return EventBus.instance;
        }

        this.events = {};

        EventBus.instance = this;        
        return EventBus.instance;
    }

    emit(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }
    on(eventName, fn) {
        this.events[eventName] = this.events[eventName] || [];
        this.events[eventName].push(fn);
    }

    off(eventName, fn) {
        if (this.events[eventName]) {
            for (var i = 0; i < this.events[eventName].length; i++) {
                if (this.events[eventName][i] === fn) {
                    this.events[eventName].splice(i, 1);
                    break;
                }
            };
        }
    }
}

然后，在组件中订阅和发布事件：

// ComponentA.vue
import EventBus from '@/util/EventBus';

// 发布事件
export default {
  methods: {
    handleClick() {
      new EventBus().emit('event-name', payload);
    },
  },
};

// #　最后，你可以在另一个组件中监听事件：
// ComponentB.vue
import EventBus from '@/util/EventBus';

export default {
  mounted() {
    new EventBus().on('event-name', (payload) => {
      // do something with the payload
    });
  },
};

这样，就可以在不同的组件之间通过事件总线进行自由通信了。

发表于：Javascript/前端、技术分享

2023-02-13