vue中使用ts时 @Model的作用

vue中使用ts时 @Model的作用

在开发vue项目时 里面的ts文件 可以看到@model 这个也是双向数据绑定 相当于v-model
还是用代码来展示一下 首先是子组件

<template>
    <div>
        <h1>child-component</h1>
        <input type="text" :value="value" @input="changed"/>
    </div>
</template>
<script lang="ts">
import { Component, Model, Vue, Emit, Inject, Prop } from 'vue-property-decorator'
export default class Chlid extends Vue {
    // model 数据绑定 也属于data 数据范畴，属于本地成员变量数据
    // 获取父组件关于input输入框中 value变量的绑定值 model 绑定为动态双向绑定
    @Model('input') value!: boolean

    // input事件，动作名称叫input,parent中绑定名称也应交做input
    @Emit('input')
    // eslint对any类型警告，可以在package.json中关闭 也可以对指定地方关闭 eslint-disable-next-line @typescript-eslint/no-explicit-any
    changed (event: any) {
      return event.target.value
    }
}
</script>

父组件

<template>
    <div>
      <h1>parent-component</h1>
      <Child v-model="content" @input="childChange"></Child><br/>
      <p>
          Child 与 Parent 绑定的内容 => {{content}}
      </p>
    </div>
</template>
<script lang="ts">
// ProvideReactive
import { Component, Vue, Provide } from 'vue-property-decorator'
import Child from '@/components/Child.vue'
@Component({
  components: {
    Child
  }
})
export default class Parent extends Vue {
  // 一个组件只会有一个 v-model
  content = '初始化内容'
  // methods
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  private childChange (val: any, event: any) {
    window.console.log(val,event)
  }
}
</script>

一目了然 ，看不懂的多看几遍代码