vue3 组件间通讯代码

vue3 的组件之间通讯主要有三种方式:

1. 父子组件之间的通信: 通过 `props` 和 `$emit` 方法进行通信。

例如:

// 子组件
export default {
  name: 'Child',
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('send', 'hello from child');
    }
  }
}

// 父组件
export default {
  name: 'Parent',
  data() {
    return {
      message: 'hello from parent'
    }
  },
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  },
  template: `
    <div>
      <Child :message="message" @send="receiveMessage"></Child>
    </div>
  `
}

2. 兄弟组件之间的通信: 通过共用一个父组件来进行通信。

例如:

// 兄弟组件 1
export default {
  name: 'Component1',
  methods: {
    sendMessage() {
      this.$emit('send', 'hello from component 1');
    }
  }
}

// 兄弟组件 2
export default {
  name: 'Component2',
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  }
}

// 父组件
export default {
  name: 'Parent',
  template: `
    <div>
      <Component1 @send="$emit('send', $event)"></Component1>
      <Component2 @send="receiveMessage"></Component2>
    </div>
  `
}

3. 不相关组件之间的通信: 可以使用事件总线 (Event Bus) 来实现。

例如:

// 事件总线 (Event Bus)
export const EventBus = new Vue();

// 组件 1
export default {
  name: 'Component1',
  methods: {
    sendMessage() {
      EventBus.$emit('send', 'hello from component 1');
    }
  }
}

// 组件 2
export default {
  name: 'Component2',
  created() {
    EventBus.$on('send', this.receiveMessage);
  },
  beforeDestroy() {
    EventBus.$off('send', this.receiveMessage);
  },
  methods: {
    receiveMessage(message) {
      console