在
Vue 3中，子组件
改变父组件数据有以下几种方法：
### 自定义事件
父组件传递数据给子组件，并将修改数据的方法以事件形式传递给子组件。子组件通过`defineEmits`定义事件，并在需要时触发该事件，将新值传递给父组件。
- 父组件示例：
```
vue
<template>
<ChildComponent :parent-data="parentData" @update-data="handleUpdateData" />
<p>父组件数据: {{ parentData }}</p>
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;
import ChildComponent from &#
39;./ChildComponent.
vue&#
39;
const parentData = ref(&#
39;初始数据&#
39;)
const handleUpdateData = (newValue) => {
parentData.value = newValue
}
</script>
```
- 子组件示例：
```
vue
<template>
<button @click="updateParentData">更新父组件数据</button>
</template>
<script setup>
import { defineProps, defineEmits } from &#
39;
vue&#
39;
const props = defineProps({
parentData: String
})
const emit = defineEmits([&#
39;update-data&#
39;])
const updateParentData = () => {
emit(&#
39;update-data&#
39;, &#
39;新的数据&#
39;)
}
</script>
```
### v-model指令
利用`v-model`指令实现双向数据绑定。父组件使用`v-model`绑定数据，子组件通过`defineProps`接收数据，并使用`defineEmits`触发`update:propName`事件来更新父组件的数据。
- 父组件示例：
```
vue
<template>
<ImportFile ref="fileDialogRef" v-model:lead-visible="leadVisible" />
</template>
<script setup>
import { ref } from &#
39;
vue&#
39;
const leadVisible = ref(false)
</script>
```
- 子组件示例：
```
vue
<template>
<button @click="handleFile">修改父组件数据</button>
</template>
<script setup>
import { defineProps, defineEmits, toRefs } from &#
39;
vue&#
39;
const props = defineProps({
leadVisible: {
type: Boolean
}
})
let { leadVisible } = toRefs(props)
const emit = defineEmits([&#
39;update:leadVisible&#
39;])
const handleFile = () => {
emit(&#
39;update:leadVisible&#
39;, true)
}
</script>
```
### 避免使用$parent和$children
虽然可以通过`$parent`和`$children`访问组件实例来实现父子组件之间的数据传递，但这种方式会破坏组件的封装性和独立性，因此应尽量避免过多使用 [^4]。
### 总结
在
Vue 3中，推荐使用自定义事件和`v-model`指令来实现子组件
改变父组件数据，这样能更好地遵循组件化开发的原则，保持组件的独立性和可维护性。
Vue 3相关内容
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
