Vue3 子组件如何给父组件传值

在Vue3开发中,子组件向父组件传值是一个常见且重要的操作场景，下面将详细介绍其实现方式。

通过自定义事件传值

子组件触发事件并传递数据

在Vue3的子组件中,我们可以使用$emit方法来触发一个自定义事件，并同时传递数据给父组件，在子组件的模板中，我们可以绑定一个事件，比如点击事件，假设我们有一个子组件ChildComponent.vue：

<template>
  <button @click="sendDataToParent">点击传递数据</button>
</template>
<script setup>
const sendDataToParent = () => {
  const dataToSend = '这是子组件要传递的数据';
  // 使用emit触发自定义事件，并传递数据
  emit('custom-event', dataToSend);
};
</script>

在上述代码中,我们定义了一个sendDataToParent方法，当按钮被点击时，该方法会被调用，在方法内部，我们定义了要传递的数据dataToSend，然后使用emit函数触发了一个名为custom-event的自定义事件，并将dataToSend作为参数传递，这里的emit是Vue3中<script setup>语法糖提供的一个函数，它用于触发自定义事件。

父组件监听事件并接收数据

在父组件中,我们需要监听子组件触发的这个自定义事件，并在事件触发时接收传递过来的数据，假设父组件为ParentComponent.vue：

<template>
  <ChildComponent @custom-event="handleChildData"/>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const handleChildData = (data) => {
  console.log('接收到子组件的数据:', data);
  // 这里可以进行对数据的进一步处理，比如更新父组件的状态等
};
</script>

在父组件的模板中,我们引入了ChildComponent，并通过@custom-event="handleChildData"来监听子组件触发的custom-event事件，当子组件触发这个事件时，父组件的handleChildData方法会被调用，并且子组件传递的数据会作为参数传递给该方法，在handleChildData方法中，我们简单地将接收到的数据打印到控制台，实际应用中可以根据需求进行更复杂的操作，比如更新父组件的响应式数据等。

使用v-model进行双向绑定传值

子组件配置v-model

Vue3中,v-model有了更灵活的使用方式，在子组件中，我们可以通过defineProps和defineEmits来配置v-model相关的行为，还是以ChildComponent.vue为例：

<template>
  <input :value="modelValue" @input="updateValue">
</template>
<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:modelValue']);
const updateValue = (e) => {
  emit('update:modelValue', e.target.value);
};
</script>

在上述代码中,我们首先通过defineProps定义了一个modelValue属性，它用于接收父组件传递过来的值，这里假设它是一个字符串类型，默认值为空字符串，我们通过defineEmits定义了一个update:modelValue事件，这个事件是v-model双向绑定机制中约定的事件名，在模板中，我们有一个输入框，其value绑定了modelValue，并且监听了input事件，当输入框的值发生变化时，会调用updateValue方法，在updateValue方法中，我们使用emit触发了update:modelValue事件，并将输入框的最新值作为参数传递。

父组件使用v-model

在父组件ParentComponent.vue中，我们可以这样使用v-model：

<template>
  <ChildComponent v-model="parentValue"/>
  <p>父组件的值: {{ parentValue }}</p>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
const parentValue = ref('');
</script>

在父组件中,我们引入了ChildComponent并使用v-model将parentValue与子组件进行双向绑定，这里的parentValue是一个ref类型的响应式数据，当子组件触发update:modelValue事件并传递新的值时，父组件的parentValue会自动更新，同时父组件传递给子组件的modelValue也会相应变化，从而实现双向绑定，在模板中，我们通过<p>父组件的值: {{ parentValue }}</p>来展示父组件中parentValue的当前值，这样可以直观地看到双向绑定的效果。

使用provide和inject传值（适用于跨层级组件传值）

祖先组件（类似父组件角色）提供数据

我们可能需要在多个层级的组件中传递数据,而不仅仅是直接的父子组件之间，这时候可以使用provide和inject，假设我们有一个祖先组件AncestorComponent.vue，它类似父组件的角色，要向子孙组件传递数据：

<template>
  <div>
    <ChildComponent/>
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
import { provide } from 'vue';
const sharedData = '这是共享的数据';
provide('sharedData', sharedData);
</script>

在AncestorComponent.vue中，我们定义了一个sharedData变量，并使用provide函数将其提供出去。provide函数的第一个参数是一个标识符，这里我们使用'sharedData'，子孙组件可以通过这个标识符来注入数据，第二个参数就是要提供的数据sharedData。

子孙组件（类似子组件角色）注入数据

在子孙组件ChildComponent.vue中，我们可以这样注入数据：

<template>
  <p>接收到的数据: {{ injectedData }}</p>
</template>
<script setup>
import { inject } from 'vue';
const injectedData = inject('sharedData');
</script>

在ChildComponent.vue中，我们使用inject函数来注入数据。inject函数的参数就是祖先组件provide时使用的标识符'sharedData'，通过这种方式，即使ChildComponent.vue与AncestorComponent.vue之间有多层嵌套组件，ChildComponent.vue也能获取到AncestorComponent.vue提供的数据，不过需要注意的是，虽然这种方式可以实现跨层级传值，但过度使用可能会使组件之间的依赖关系变得不清晰，所以在实际应用中要谨慎使用，尽量在确实需要跨层级传递数据且没有更好的解决方案时才选择这种方式。

通过事件总线（event bus）传值（不推荐在Vue3中使用，但了解其原理有帮助）

创建事件总线

在Vue2中,事件总线是一种常用的组件间通信方式，虽然在Vue3中不推荐使用，但理解其原理对深入理解组件通信有帮助，我们需要创建一个事件总线，可以创建一个单独的eventBus.js文件：

import { createApp } from 'vue';
const eventBus = createApp({}).config.globalProperties.$eventBus = new Vue();
export default eventBus;

在上述代码中,我们使用createApp创建了一个Vue应用实例，并将其$eventBus属性设置为一个新的Vue实例，这样就创建了一个事件总线。

子组件通过事件总线发送数据

在子组件ChildComponent.vue中：

<template>
  <button @click="sendData">发送数据</button>
</template>
<script setup>
import eventBus from './eventBus.js';
const sendData = () => {
  const data = '子组件的数据';
  eventBus.$emit('data-from-child', data);
};
</script>

在子组件中,我们引入了eventBus，并在按钮点击时，使用$emit方法在事件总线上触发一个data-from-child事件，并传递数据。

父组件通过事件总线接收数据

在父组件ParentComponent.vue中：

<template>
  <ChildComponent/>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
import eventBus from './eventBus.js';
eventBus.$on('data-from-child', (data) => {
  console.log('接收到子组件的数据:', data);
});
</script>

在父组件中,我们同样引入了eventBus，并使用$on方法监听data-from-child事件，当子组件在事件总线上触发该事件时，父组件的回调函数会被调用，从而接收到子组件传递的数据，不过在Vue3中，由于有更简洁和推荐的方法（如前面介绍的自定义事件、v-model等），事件总线这种方式逐渐不再被推荐使用，因为它可能会导致代码的可维护性变差，特别是在大型项目中，事件总线可能会被多个组件滥用，导致事件监听和触发的逻辑变得混乱。

在Vue3中,子组件给父组件传值有多种方式，每种方式都有其适用场景，通过自定义事件可以实现简单直接的数据传递；v-model适用于需要双向绑定的场景；provide和inject适用于跨层级组件传值；而事件总线虽然不推荐，但了解其原理有助于更深入理解组件间通信的本质，开发者可以根据具体的业务需求和项目结构选择合适的方式来实现子组件向父组件传值。