vue2 组件通信方式

父子组件

1. props / $emit
2. provide / inject : 父组件向深层子组件传递

• 缺点：数据流向不透明

// 父组件
export default {
  provide: {
    message: 'Hello from ancestor'
  }
};

// 深层子组件
export default {
  inject: ['message']
};

3. $attrs/$listeners
4. ref
5. v-model

兄弟组件

1. 父组件中转：兄弟组件不直接通信，通过父组件中转

通用

1. EventBus : 事件总线

// vue2
// event-bus.js
import Vue from 'vue';
export const eventBus = new Vue();

// 发送事件的组件
import { eventBus } from './event-bus.js';
eventBus.$emit('custom-event', 'Some data');

// 接收事件的组件
import { eventBus } from './event-bus.js';
export default {
  created() {
    eventBus.$on('custom-event', (data) => {
      console.log(data);
    });
  }
};

// vue3  移除了Vue构造函数，可以使用第三方库mitt来实现
// 安装
npm install mitt

// event-bus.js
import mitt from 'mitt';
export const eventBus = mitt();

// 发送事件的组件
import { eventBus } from './event-bus.js';
eventBus.emit('custom-event', 'Some data');

// 接收事件的组件
import { eventBus } from './event-bus.js';
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  const handler = (data) => {
    console.log(data);
  };
  eventBus.on('custom-event', handler);
  onUnmounted(() => {
    eventBus.off('custom-event', handler);
  });
});

2. Vuex / Pinia