Vue3 子组件修改父组件的数据

在Vue3中，子组件修改父组件的数据有多种方式：

1. 使用事件派发：在子组件中使用`$emit`方法触发一个自定义事件，并通过该事件传递需要修改的数据。在父组件中通过监听该事件，并在事件处理函数中修改数据。

子组件代码示例：

<template>
  <button @click="updateParentData">更新父组件数据</button>
</template>

<script>
export default {
  methods: {
    updateParentData() {
      this.$emit('update', newData); // 触发自定义事件，并传递需要修改的数据
    }
  }
}
</script>

父组件代码示例：

<template>
  <div>
    <p>父组件数据: {{ parentData }}</p>
    <child-component @update="handleUpdate"></child-component> <!-- 监听子组件触发的自定义事件 -->
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '初始数据'
    };
  },
  methods: {
    handleUpdate(newData) { // 事件处理函数，接收子组件传递的数据并修改父组件数据
      this.parentData = newData;
    }
  }
}
</script>

2. 使用`$attrs`和`$listeners`：在Vue3中，可以通过`inheritAttrs`和`listeners`选项将`$attrs`和`$listeners`注入到子组件中，从而在子组件内部直接修改父组件的数据。

子组件代码示例：

<template>
  <button @click="updateParentData">更新父组件数据</button>
</template>

<script>
export default {
  inheritAttrs: false,// 禁用属性继承
  props: ['parentData'],
  emits: ['update'], // 声明可以触发的自定义事件
  methods: {
    updateParentData() {
      this.$emit('update', newData); // 触发自定义事件，并传递需要修改的数据
    }
  }
}
</script>

父组件代码示例：

<template>
  <div>
    <p>父组件数据: {{ parentData }}</p>
    <child-component :parent-data="parentData" @update="parentData = $event"> </child-component> <!-- 直接修改父组件数据 -->
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '初始数据'
    };
  }
}
</script>

这两种方法都可以实现子组件修改父组件的数据，选择使用哪种方式取决于具体的业务场景和需求。