vue3+ts 数据双向绑定

在 Vue3 中使用 TypeScript 实现数据双向绑定，主要需要以下几个步骤：

1. 创建组件
首先，需要创建一个组件，定义组件所需要的属性和方法，并使用装饰器 @Component 对组件进行装饰，以便可以在 Vue 中使用。

```typescript
import { Component, Vue } from "vue-property-decorator";

@Component
export default class MyComponent extends Vue {
  private message: string = "Hello, Vue3 with TypeScript!"
}
```

2. 在模板中绑定数据
然后，在组件的模板中，通过双花括号把要绑定的数据绑定到页面上。例如：

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

3. 数据双向绑定
最后，在 TypeScript 中，可以使用@Prop 和 @Emit 装饰器来实现数据双向绑定。@Prop 装饰器用于将数据传递给子组件，@Emit 装饰器用于监听子组件事件，并发送数据到父组件。

下面是一个简单的示例：

```typescript
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class MyComponent extends Vue {
  @Prop() private message!: string;
  @Emit() private updateMsg(msg: string) {}

  private onMsgChange(msg: string) {
    this.message = msg;
    this.updateMsg(msg);
  }
}
```

这个示例中，我们定义了一个名为 message 的 props，然后在 onMsgChange 方法中更新 message 的值，并通过 updateMsg 方法将更新后的值发送到父组件。

在父组件中，我们可以通过子组件的 v-model 指令将 message 双向绑定到子组件中。

```vue
<template>
  <div>
    <my-component v-model="message"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyComponent from "@/components/MyComponent.vue";

@Component({
  components: {
    MyComponent
  }
})
export default class HelloWorld extends Vue {
  private message: string = "Hello, Vue3 with TypeScript!";
}
</script>
```

在上面的示例中，我们使用 v-model 将父组件的 message 和子组件的 message 双向绑定。这样，当子组件中的 message 发生变化时，父组件的 message 也会跟着变化。

总之，使用 TypeScript 实现数据双向绑定需要以上三个步骤：创建组件，绑定数据，实现数据双向绑定。通过深入理解 Vue3 和 TypeScript，我们可以更加灵活、高效地构建应用程序。