vue3 父修改子组件数据

在 Vue 3 中，父组件可以通过 props 将数据传递给子组件，并且通过 emit 事件来修改子组件的数据。

首先，在父组件中定义一个属性，并将其传递给子组件作为 props：

<template>
  <div>
    <child-component :childData="data" @updateChildData="updateChildData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: 'Hello'
    };
  },
  methods: {
    updateChildData(newData) {
      this.data = newData;
    }
  }
}
</script>

在子组件中，接收父组件传递的数据，并通过 $emit 方法触发一个自定义事件来通知父组件更新数据：

<template>
  <div>
    <p>{{ childData }}</p>
    <button @click="updateParentData">Update Parent Data</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: String
  },
  methods: {
    updateParentData() {
      const newData = 'New Data';
      this.$emit('updateChildData', newData);
    }
  }
}
</script>

在父组件中，我们定义了一个名为 `updateChildData` 的方法来更新子组件的数据。子组件中的按钮点击事件会调用 `updateParentData` 方法，该方法通过 $emit 触发了 `updateChildData` 事件，并传递了新的数据给父组件。父组件接收到该事件后，会更新自己的 `data` 数据，从而实现了父组件修改子组件数据的效果。

这样，父组件就可以通过修改自己的数据来间接地修改子组件的数据。