vue3子组件修改父组件复杂数据

在 Vue 3 中，子组件修改父组件的复杂数据可以通过使用自定义事件来实现。下面是一种常见的方法：

1. 在父组件中定义一个复杂数据对象。例如，我们定义一个名为 "dataObj" 的对象：

<template>
  <div>
    <h2>父组件</h2>
    <p>{{ dataObj.name }}</p>
    <child-component :childData="dataObj" @updateData="updateDataObj" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      dataObj: {
        name: 'John',
        age: 25,
        // 其他属性...
      },
    };
  },
  methods: {
    updateDataObj(updatedData) {
      this.dataObj = updatedData;
    },
  },
};
</script>

2. 在子组件中，通过 `$emit` 方法触发一个自定义事件来发送修改后的数据给父组件：

<template>
  <div>
    <h3>子组件</h3>
    <input v-model="childData.name" type="text" />
    <button @click="updateParentData">保存</button>
  </div>
</template>

<script>
export default {
  props: ['childData'],
  methods: {
    updateParentData() {
      this.$emit('updateData', this.childData);
    },
  },
};
</script>

在这个例子中，子组件中的输入框绑定了父组件传递过来的 `childData.name` 属性。当用户在子组件中修改输入框的值后，点击保存按钮会触发 `updateParentData` 方法，该方法通过 `$emit` 方法触发了名为 "updateData" 的自定义事件，并将 `childData` 作为参数传递给父组件。

在父组件中，我们通过 `@updateData="updateDataObj"` 监听了子组件发出的 "updateData" 事件，并将其绑定到 `updateDataObj` 方法上。当子组件触发了 "updateData" 事件时，`updateDataObj` 方法会被调用，将子组件修改后的数据更新到父组件的 `dataObj` 中。

这样，子组件就可以修改父组件的复杂数据了。