vue3子组件修改父数据

由于Vue是单向数据流，子组件无法直接修改父组件中传入的数据。根据Vue官网的说明，父组件的数据可以向下流动到子组件中，但反过来是不行的，这是为了防止意外改变父组件的状态导致数据流向难以理解。因此，在Vue中，我们通常通过子组件触发父组件中的方法来间接修改父组件的数据。

在Vue 3中，可以通过在子组件中使用`$emit`方法来触发父组件中的事件，并将需要修改的数据作为参数传递给父组件。在父组件中，监听该事件并在相应的事件处理方法中修改对应的数据。

以下是一个示例代码：

<!-- 父组件 -->
<template>
  <div>
    <h1>父组件</h1>
    <p>{{ parentData }}</p>
    <child-component @update-parent-data="updateParentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '父数据'
    }
  },
  methods: {
    updateParentData(newData) {
      this.parentData = newData
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <button @click="updateParentData">修改父数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateParentData() {
      this.$emit('update-parent-data', '新的父数据')
    }
  }
}
</script>

在上述示例中，父组件中的`parentData`作为props传递给子组件，在子组件中通过点击按钮触发`updateParentData`方法，该方法通过`$emit`将新的数据传递给父组件。在父组件中监听`update-parent-data`事件，并在`updateParentData`方法中修改`parentData`的值。