vue子组件改变父组件data
时间: 2023-09-15 08:15:09 浏览: 49
在Vue中,子组件改变父组件的数据需要通过事件来进行通信。以下是一个示例:
父组件:
```vue
<template>
<div>
<h1>{{ message }}</h1>
<ChildComponent @update-message="updateMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
message: 'Hello',
};
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
},
},
};
</script>
```
子组件:
```vue
<template>
<button @click="changeMessage">Change Message</button>
</template>
<script>
export default {
methods: {
changeMessage() {
const newMessage = 'New Message';
this.$emit('update-message', newMessage);
},
},
};
</script>
```
在上述示例中,子组件通过`$emit`方法触发了名为`update-message`的自定义事件,并将新的消息作为参数传递给父组件。父组件通过`@update-message`监听到该事件,并在相应的方法`updateMessage`中更新了`message`的值。
这样,当子组件中的按钮被点击时,父组件的数据`message`就会被改变。