vue 子父组件互相改值

在Vue.js中，子组件想要修改父组件的状态（如数据属性的值）时，通常遵循以下步骤：

1. 父组件向子组件传递数据：通过props（属性）将需要被子组件操作的值传入子组件。例如，在父组件模板中使用子组件时，将父组件的数据作为prop绑定到子组件上。

<!-- 父组件模板 -->
<template><ChildComponent :parentValue="parentStateToModify" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {data() {return {parentStateToModify: '初始值',};},components: { ChildComponent },
};
</script>

2. 子组件通过事件通知父组件进行修改：子组件不直接修改父组件传入的prop，而是通过$emit方法触发一个自定义事件，将新的值作为参数传递给父组件。父组件在监听到这个事件后，执行相应的更新逻辑。

<!-- 子组件模板 -->
<template><button @click="updateParentValue">修改父组件值</button>
</template><script>
export default {props: {parentValue: String,},methods: {updateParentValue() {const newValue = '新的值'; // 这里可以是任何你希望更新的值this.$emit('update-parent-value', newValue);},},
};
</script>

3. 父组件监听并响应子组件事件：在父组件中，通过v-on或@语法监听子组件触发的自定义事件，并在事件处理函数中更新自身的状态。

<!-- 父组件模板（继续添加事件监听） -->
<template><ChildComponent :parentValue="parentStateToModify" @update-parent-value="onUpdateParentValue" />
</template><script>
// ...（保持之前的导入和数据声明不变）export default {// ...（保持之前的methods声明不变）methods: {onUpdateParentValue(newValue) {this.parentStateToModify = newValue;},},
};
</script>