vue3子组件修改父组件v-model

在Vue 3中，子组件可以通过`$emit`来触发一个自定义事件，从而修改父组件中 `v-model` 绑定的值。下面是一个示例：

首先，在子组件中，你可以使用`$emit`来触发一个自定义事件，并传递需要更新的值作为参数：

<template>
  <button @click="updateParentValue">Update Parent Value</button>
</template>

<script>
export default {
  methods: {
    updateParentValue() {
      this.$emit('update:modelValue', 'New Value');
    }
  }
}
</script>

在父组件中，你可以在子组件上监听自定义事件，并在事件处理函数中更新父组件的 `v-model` 绑定的值：

<template>
  <div>
    <child-component v-model="modelValue" @update:modelValue="handleUpdate" />
    <p>{{ modelValue }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      modelValue: ''
    };
  },
  methods: {
    handleUpdate(newValue) {
      this.modelValue = newValue;
    }
  }
}
</script>

在这个例子中，当点击子组件的按钮时，会通过自定义事件`update:modelValue`触发父组件的`handleUpdate`方法，并将新的值作为参数传递进去，从而实现了修改父组件的`v-model`绑定的值。