vue3 子传父 v-model 用setup语法糖的写法些

在 Vue 3 中，你可以使用 `setup` 语法糖来实现子组件向父组件传递数据和更新父组件的 `v-model`。下面是一个示例：

<template>
  <div>
    <!-- 子组件 -->
    <ChildComponent v-model="childValue" />
    <p>子组件的值: {{ childValue }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childValue = ref('');

    return {
      childValue
    };
  }
};
</script>

在这个例子中，`ChildComponent` 是子组件，它接收一个 `v-model` 绑定的值 `childValue`。在父组件中，我们使用 `setup` 函数来定义一个名为 `childValue` 的响应式变量，并将其传递给子组件。子组件可以通过修改 `childValue` 来更新父组件的值。

在子组件中，你可以通过 `props` 接收 `childValue` 并将其绑定到一个内部变量上。然后，你可以在子组件中使用 `$emit` 来向父组件发送更新事件。

<template>
  <div>
    <input type="text" :value="value" @input="updateValue($event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(newValue) {
      this.$emit('update:value', newValue);
    }
  }
};
</script>

在子组件中，我们将 `value` 属性绑定到输入框的值，并通过 `@input` 事件监听输入框的变化。当输入框的值发生变化时，我们调用 `updateValue` 方法，并使用 `$emit` 发送一个名为 `update:value` 的事件，将新的值传递给父组件。

这样，在父组件中，我们就可以通过监听子组件发出的 `update:value` 事件来更新父组件的值，并且这个更新会通过 `v-model` 双向绑定到子组件上。