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
中子组件传递数据给父
组件的几种常用方式，根据具体的业务需求选择合适的方式使用。
8073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
