vue3不使用v-model如何双向绑定组件

在 Vue 3 中，你可以使用 `v-model` 指令来实现双向绑定组件，但是也可以使用 `emit` 和 `props` 实现同样的效果。

具体来说，你可以在子组件中使用 `props` 将父组件的数据传递给子组件，然后在子组件中触发 `emit` 事件来通知父组件更新其数据。下面是一个示例：

<!-- Parent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <Child :value="name" @input="name = $event" />
    <p>My name is {{ name }}</p>
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  data() {
    return {
      name: 'John',
    };
  },
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <input :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
};
</script>

在这个示例中，父组件 `Parent.vue` 中的 `name` 数据通过 `props` 传递给了子组件 `Child.vue` 中的 `value` 属性。在子组件中，我们使用 `input` 事件触发 `emit`，并传递输入框中的值作为 `$event` 参数。在父组件中，我们使用 `@input` 监听子组件触发的 `input` 事件，并将 `$event` 参数（即子组件中的输入框的值）赋给 `name` 数据，从而实现双向绑定。

需要注意的是，在 Vue 3 中，`v-model` 实际上是一个语法糖，它会自动将父组件中的数据通过 `props` 传递给子组件，并监听子组件的 `update:modelValue` 事件来更新父组件的数据。因此，如果你不想使用 `v-model`，也可以手动实现这个过程。