vue3子组件修改父组件传值

在Vue 3中，子组件如果需要修改从父组件传递过来的数据（称为props），通常有两种方式：

1. **通过事件（Event Emitters）**：
子组件可以定义一个自定义事件，并在适当的时候触发这个事件，同时将新的数据作为参数发送。父组件监听这个事件，在接收到新数据后更新自身状态。

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

<script setup>
import { ref } from 'vue';
const newData = ref('新的数据');

function updateParentData() {
  emit('updateParent', newData.value);
}
</script>

// 父组件
<ChildComponent :data="parentData" @updateParent="parentData = $event"></ChildComponent>

2. **通过`$emit`直接修改props**：
如果父组件允许子组件直接改变props的值，可以在子组件内部使用`$emit`来通知父组件更新。

// 子组件
<template>
  <input v-model="newData">
</template>

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  // 假设parentData是一个接收字符串的prop
  this.$emit('update:parentData', this.newData); // 使用 `update:parentData` 触发更新事件
});
</script>

注意，在上述方法中，父组件应使用`v-bind:`绑定props，并且在`<script setup>`中处理`update`前缀的事件。