1、$emit

<!-- ChildComponent.vue -->
<template>
  <button @click="emitEvent">Click me!</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      // 触发名为 'custom-event' 的自定义事件，并传递一些数据
      this.$emit('custom-event', 'Hello from ChildComponent!');
    }
  }
}
</script>

1. 父组件定义函数methods: { handleCustomEvent(data) { // 当 'custom-event' 事件被触发时，执行这个方法 this.message = data; }
2. 父组件传递函数给子组件<ChildComponent @custom-event="handleCustomEvent" />
3. 子组件使用this.$emit调用父组件的函数this.$emit('custom-event', 'Hello from ChildComponent!');

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <!-- 使用 ChildComponent 组件，并监听 'custom-event' 事件 -->
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleCustomEvent(data) {
      // 当 'custom-event' 事件被触发时，执行这个方法
      this.message = data;
    }
  }
}
</script>

2、使用$ref

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="incrementChildCounter">Increment Child Counter</button>
    <!-- 使用 ref 特性引用 ChildComponent -->
    <ChildComponent ref="childComponentRef" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    incrementChildCounter() {
      // 通过 this.$refs 访问引用的子组件，并调用子组件的方法
      this.$refs.childComponentRef.increment();
    }
  }
}
</script>

1. 子组件添加ref属性 <ChildComponent ref="childComponentRef" />
2. 父组件获取子组件对象：this.$refs.childComponentRef.increment();

3、使用$provide/inject$

<!-- ParentComponent.vue -->
<template>
  <div>
    <!-- 使用 ChildComponent 组件 -->
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    // 提供一个名为 message 的数据
    return {
      message: 'Hello from ParentComponent!'
    };
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ providedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'], // 注入名为 message 的数据

  computed: {
    providedMessage() {
      // 使用注入的 message 数据
      return this.message;
    }
  }
}
</script>

1. 父组件provide() { // 提供一个名为 message 的数据 return { message: 'Hello from ParentComponent!' }; }$return$一个对象有$message$属性

2. 子组件 inject: ['message'], // 注入名为 message 的数据 然后使用this.message

3、事件总线

首先，我们需要创建一个事件总线实例。我们可以在单独的文件中创建它，例如 EventBus.js：

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

然后在 SiblingA 组件中，当按钮被点击时，我们触发一个自定义事件，并通过事件总线发送消息

1. EventBus.$emit('message', 'Hello from SiblingA!');

<!-- SiblingA.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendMessage() {
      // 触发名为 'message' 的自定义事件，并传递消息
      EventBus.$emit('message', 'Hello from SiblingA!');
    }
  }
}
</script>

接下来，在 SiblingB 组件中，我们监听 message 事件，并在事件触发时接收并显示收到的消息： EventBus.$on('message', message => {});

<!-- SiblingB.vue -->
<template>
  <div>
    <p>Received Message: {{ receivedMessage }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  mounted() {
    // 监听名为 'message' 的自定义事件
    EventBus.$on('message', message => {
      // 收到消息后更新 receivedMessage 数据
      this.receivedMessage = message;
    });
  }
}
</script>