在vue3如何实现组件通信？

在 Vue 3 中，组件之间的通信可以通过多种方式实现，这包括 props、emit、refs、provide/inject、Vuex 和 event bus 等。以下是一些常用的通信方式的简要说明：

1. Props

Props 是用于从父组件向子组件传递数据的。你可以在子组件中声明 props，然后在父组件中通过属性传递数据。

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

// 父组件
<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

2. Emit

Emit 用于从子组件向父组件发送事件。你可以在子组件中使用 $emit 方法触发一个事件，并在父组件中监听这个事件。

// 子组件
<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childEvent', 'Hello from child');
    }
  }
}
</script>

// 父组件
<template>
  <ChildComponent @childEvent="handleChildEvent" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(message) {
      console.log(message); // 输出：Hello from child
    }
  }
}
</script>

3. Refs

Refs 可以用于直接访问组件实例或 DOM 元素。你可以使用 ref 属性在模板中创建一个引用，并通过 this.$refs 在组件实例中访问它。

// 子组件（假设有一个名为 myMethod 的方法）
// ...

// 父组件
<template>
  <ChildComponent ref="childRef" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    this.$refs.childRef.myMethod(); // 调用子组件的方法
  }
}
</script>

4. Provide/Inject

Provide/Inject 可以用于在祖先组件和后代组件之间传递数据，而无需通过每个中间组件。你可以在祖先组件中使用 provide 选项提供数据，并在后代组件中使用 inject 选项接收数据。

5. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如果你正在开发一个大型应用程序，并且需要在多个组件之间共享状态，那么 Vuex 可能是一个很好的选择。
6. Event Bus

Event Bus（事件总线）是一个中央事件系统，允许你在应用程序中的任何位置触发和监听事件。你可以创建一个新的 Vue 实例作为事件总线，并使用 $emit 和 $on 方法触发和监听事件。然而，请注意，随着 Vue 3 的发布，许多开发者开始转向使用更现代的状态管理解决方案（如 Vuex 或 Pinia），而不是使用 Event Bus。
7. Mitt/Tiny-Emitter (第三方库)

除了 Vue 自带的方式外，还可以使用一些第三方库如 Mitt 或 Tiny-Emitter 来实现更灵活、轻量级的事件通信。这些库提供了类似 Event Bus 的功能，但通常具有更小的体积和更高的性能。
8. Props + Slots (高级用法)

对于更复杂的场景，你可以结合使用 props 和 slots 来实现更高级的组件通信和组合逻辑。例如，你可以创建一个具有默认插槽和作用域插槽的组件，以允许父组件传递内容并访问子组件的内部状态。