vue子组件如何修改父组件的值

Vue 中，子组件想要改变父组件的数据，通常需要通过props向下传递数据，并在子组件内部触发`$emit`事件将更新通知给父组件。以下是基本步骤：

1. **父子组件通信**：父组件向子组件传递一个属性（prop），例如 `value`，用于接收子组件的更新。

// 父组件 template
<template>
  <div>
    <child-component :value="parentValue" @update-value="handleUpdate"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return { parentValue: '初始值' };
  },
  methods: {
    handleUpdate(newValue) {
      this.parentValue = newValue;
    }
  }
};
</script>

2. **子组件处理**：子组件接收到值后，在需要的时候（比如用户输入、按钮点击等操作）使用 `$emit` 发送更新：

// 子组件 template
<template>
  <input v-model="localValue" @input="handleChange">
</template>

<script>
export default {
  props: ['value'], // 接收父组件传来的值
  methods: {
    handleChange(event) {
      this.$emit('update-value', event.target.value); // 当输入变化时，发送更新事件
    }
  }
};
</script>

现在，当子组件内的输入框内容发生变化时，会触发`update-value`事件并将新值传递回父组件，父组件的`handleUpdate`方法会被调用，从而更新`parentValue`。