vue 3中 如何进行数据双向绑定

在 Vue 3 中，你可以使用 `v-model` 指令实现数据的双向绑定。

具体使用方法如下：

1. 在模板中使用 `v-model` 指令绑定数据

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

2. 在组件中声明数据

<script>
export default {
  data() {
    return {
      message: ""
    };
  }
};
</script>

这样，当用户在输入框中输入内容时，`message` 数据会自动更新，同时当 `message` 数据改变时，输入框中的内容也会自动更新。

需要注意的是，在 Vue 3 中，使用 `v-model` 绑定自定义组件时，需要在组件中使用 `emits` 属性来声明绑定的事件。例如：

<my-component v-model:message="message"></my-component>

// MyComponent.vue
<script>
export default {
  emits: ["update:message"],
  props: ["message"]
};
</script>

这里声明了 `emits` 属性，它包含了一个 `update:message` 事件，表示当组件内部的 `message` 数据改变时，需要触发这个事件来更新外部的 `message` 数据。同时，声明了一个 `message` 属性，用于接收外部传入的 `message` 数据。