vue3 父修改子组件数据
时间: 2023-10-19 18:30:46 浏览: 84
vue中如何让子组件修改父组件数据
5星 · 资源好评率100%
在 Vue 3 中,父组件可以通过 props 将数据传递给子组件,并且通过 emit 事件来修改子组件的数据。
首先,在父组件中定义一个属性,并将其传递给子组件作为 props:
```vue
<template>
<div>
<child-component :childData="data" @updateChildData="updateChildData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
data: 'Hello'
};
},
methods: {
updateChildData(newData) {
this.data = newData;
}
}
}
</script>
```
在子组件中,接收父组件传递的数据,并通过 $emit 方法触发一个自定义事件来通知父组件更新数据:
```vue
<template>
<div>
<p>{{ childData }}</p>
<button @click="updateParentData">Update Parent Data</button>
</div>
</template>
<script>
export default {
props: {
childData: String
},
methods: {
updateParentData() {
const newData = 'New Data';
this.$emit('updateChildData', newData);
}
}
}
</script>
```
在父组件中,我们定义了一个名为 `updateChildData` 的方法来更新子组件的数据。子组件中的按钮点击事件会调用 `updateParentData` 方法,该方法通过 $emit 触发了 `updateChildData` 事件,并传递了新的数据给父组件。父组件接收到该事件后,会更新自己的 `data` 数据,从而实现了父组件修改子组件数据的效果。
这样,父组件就可以通过修改自己的数据来间接地修改子组件的数据。
阅读全文