vue3 子组件修改父组件数据
时间: 2023-09-18 13:07:13 浏览: 35
在 Vue 3 中,子组件修改父组件数据有两种方式:
1. 通过事件触发父组件的方法,修改父组件的数据。子组件使用 `$emit` 方法触发事件,父组件使用 `@` 或 `v-on` 监听事件。例如:
```html
<!-- 父组件 -->
<template>
<div>
<p>{{ message }}</p>
<ChildComponent @update-message="updateMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
};
</script>
<!-- 子组件 -->
<template>
<button @click="updateParentMessage">Update parent message</button>
</template>
<script>
export default {
methods: {
updateParentMessage() {
this.$emit('update-message', 'New message from child component');
}
}
};
</script>
```
2. 使用 `v-model` 双向绑定父组件的数据,子组件通过改变 `v-model` 绑定的属性值来修改父组件的数据。例如:
```html
<!-- 父组件 -->
<template>
<div>
<p>{{ message }}</p>
<ChildComponent v-model="message" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello, Vue!'
};
}
};
</script>
<!-- 子组件 -->
<template>
<input :value="message" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
props: {
modelValue: String
},
emits: ['update:modelValue'],
computed: {
message: {
get() {
return this.modelValue;
},
set(value) {
this.$emit('update:modelValue', value);
}
}
}
};
</script>
```