vue3中子组件传递数据给父组件

Vue 3 中子组件传递数据给父组件的方式有以下几种：

1. 使用事件触发：
- 在子组件中使用 `$emit` 方法触发一个自定义事件，并传递需要传递的数据。
- 在父组件中使用 `v-on` 或 `@` 监听子组件触发的自定义事件，并在事件处理函数中获取传递的数据。

2. 使用`v-model`指令：
- 在子组件内部，使用 `props` 接收来自父组件的数据，并在子组件内部修改该数据。
- 在子组件内部使用 `$emit('update:modelValue', value)` 触发一个名为 `update:modelValue` 的事件，将修改后的数据作为参数传递给父组件。
- 在父组件中使用 `v-model` 指令绑定子组件的数据，并监听子组件触发的 `update:modelValue` 事件。

3. 使用 provide/inject：
- 在父组件中使用 `provide` 方法提供数据，子组件中使用 `inject` 方法接收数据。
- 通过这种方式，父组件中的数据会被子组件共享，并且当父组件中的数据发生变化时，子组件也会联动变化。

示例代码如下：

// 父组件
<template>
<div>
<ChildComponent @customEvent="handleCustomEvent" v-model="parentData" />
</div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent,
},
setup() {
const parentData = ref('');

const handleCustomEvent = (data) => {
console.log(data); // 子组件传递过来的数据
};

return {
parentData,
handleCustomEvent,
};
},
};
</script>

// 子组件 ChildComponent.vue
<template>
<div>
<input v-model="childData" />
<button @click="handleClick">发送数据给父组件</button>
</div>
</template>

<script>
import { ref, provide, inject } from 'vue';

export default {
props: ['modelValue'],
emits: ['update:modelValue', 'customEvent'],
setup(props, { emit }) {
const childData = ref('');

const handleClick = () => {
emit('update:modelValue', childData.value); // 发送数据给父组件
emit('customEvent', childData.value); // 触发一个自定义事件，并传递数据给父组件
};

provide('childData', childData); // 使用 provide 共享子组件的数据

return {
childData,
handleClick,
};
},
created() {
const sharedData = inject('childData'); // 使用 inject 接收共享的数据
console.log(sharedData); // 父组件传递过来的数据
},
};
</script>

在上述代码中，父组件通过传递 `parentData` 给子组件，并监听 `customEvent` 事件和 `update:modelValue` 事件，以接收子组件传递过来的数据。子组件内部使用 `v-model` 绑定 `childData` 数据，并通过 `$emit` 触发 `update:modelValue` 事件和 `customEvent` 事件，以传递数据给父组件。同时，子组件也使用 `provide` 共享 `childData` 数据给其他子组件使用。

以上是 Vue 3 中子组件传递数据给父组件的几种常用方式，根据具体的业务需求选择合适的方式使用。