要修改父組件的值,可以通過props和事件來實現。
// 父組件
<template>
<div>
<ChildComponent :value="parentValue" @updateValue="updateValue" />
<p>父組件的值: {{ parentValue }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentValue: '初始值',
};
},
methods: {
updateValue(newValue) {
this.parentValue = newValue;
},
},
components: {
ChildComponent,
},
};
</script>
// 子組件
<template>
<div>
<input v-model="value" @input="updateParentValue" />
<p>子組件的值: {{ value }}</p>
</div>
</template>
<script>
export default {
props: {
value: String,
},
methods: {
updateParentValue() {
this.$emit('updateValue', this.value);
},
},
};
</script>
// 父組件
<template>
<div>
<ChildComponent @updateValue="updateValue" />
<p>父組件的值: {{ parentValue }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentValue: '初始值',
};
},
methods: {
updateValue(newValue) {
this.parentValue = newValue;
},
},
components: {
ChildComponent,
},
};
</script>
// 子組件
<template>
<div>
<button @click="updateParentValue">更新父組件的值</button>
</div>
</template>
<script>
export default {
methods: {
updateParentValue() {
this.$emit('updateValue', '新的值');
},
},
};
</script>
以上示例演示了兩種方法來修改父組件的值,你可以根據實際情況選擇其中一種來實現。