父组件:在父组件中,将需要被修改的值作为属性(prop)传递给子组件,并定义一个方法(通常是updateValue
)来处理值的变化:
<template>
<view>
<child-component :value="parentValue" @updateValue="handleChildValueChange"></child-component>
</view>
</template>
<script>
export default {
data() {
return {
parentValue: '初始值',
};
},
methods: {
handleChildValueChange(newValue) {
this.parentValue = newValue;
},
},
};
</script>
子组件:
<template>
<button @click="handleButtonClick">点击修改父值</button>
</template>
<script>
export default {
props: {
value: {
type: String,
default: '',
},
},
methods: {
handleButtonClick() {
this.$emit('updateValue', '新的值');
},
},
};
</script>