vue3中实现子父组件通信的多种方法

在Vue 3开发中，子父组件通信是一项基础且关键的技能，它有助于构建高效、灵活的用户界面。以下将介绍几种常见的实现方式。

1. 事件与回调函数

这是最常用的方法之一。在父组件中定义一个函数，然后将该函数作为一个属性传递给子组件。子组件通过$emit触发一个自定义事件，并传递需要的数据。父组件在接收这个自定义事件时，调用之前传递的函数，从而实现数据从子组件流向父组件。例如，在子组件中：

<template>
  <button @click="sendDataToParent">点击</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emits = defineEmits(['dataFromChild']);
const sendDataToParent = () => {
  emits('dataFromChild', '子组件的数据');
};
</script>

在父组件中：

<template>
  <child-component @dataFromChild="handleDataFromChild"></child-component>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const handleDataFromChild = (data) => {
  console.log(data);
};
</script>

2. 使用ref和provide、inject

Vue 3的provide和inject API 可以实现跨级组件通信，也可用于子父组件通信。父组件通过provide提供一个ref变量，子组件通过inject注入该变量，这样子组件就可以修改父组件中的数据。例如： 父组件：

<template>
  <child-component></child-component>
</template>
<script setup>
import { provide, ref } from 'vue';
const parentData = ref('初始数据');
provide('parentData', parentData);
</script>

子组件：

<template>
  <button @click="updateParentData">更新数据</button>
</template>
<script setup>
import { inject } from 'vue';
const parentData = inject('parentData');
const updateParentData = () => {
  parentData.value = '更新后的数据';
};
</script>

3. 使用事件总线（Event Bus）

虽然Vuex更适合大规模状态管理，但对于简单场景，事件总线也是一种选择。创建一个全局的事件总线对象，在需要通信的组件中引入该对象。子组件通过事件总线触发事件，父组件监听该事件来获取数据。例如：

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

子组件：

<template>
  <button @click="sendData">发送</button>
</template>
<script setup>
import emitter from './emitter.js';
const sendData = () => {
  emitter.emit('childData', '来自子组件的数据');
};
</script>

父组件：

<template>
  <!-- 组件内容 -->
</template>
<script setup>
import emitter from './emitter.js';
emitter.on('childData', (data) => {
  console.log(data);
});
</script>

通过这些方法，开发者能根据项目需求灵活地在Vue 3中实现子父组件通信，提升开发效率和应用的可维护性。