在 vue 中使用装饰器

在 vue 中使用 ts 时，有一句常见的代码

import { Component, Vue } from 'vue-property-decorator'

vue-property-decorator 是 vue 中封装装饰器的插件，其中有哪些装饰器呢？装饰器首字母大写

@Component
@Watch
@Prop
@Model
@Emit

（一）vue 的组件中使用 ts 以及 watch 装饰器的使用

<template>
  <div>
    <City />
    {
   
   { name }} -- {
   
   { age }}
    <button @click="changeAge">绑定事件</button>
    {
   
   { this.info }}
  </div>
</template>

<script lang="ts">
// 在 vue 装饰器类库中引入需要的装饰器
import { Component, Vue, Watch } from 'vue-property-decorator'
import City from '@/components/City.vue'
@Component({
  name: 'Test', // 组件名称
  components: { // 需要的子组件
    City
  }
})
class Test extends Vue {
  // 组件的数据 相当于 data(){}
  private name: string = 'zfb'
  protected age: number = 18
  // methods 中的方法
  changeAge () {
    this.age = 23
  }
  // computed 计算属性 set/get
  set info (val: {
    name: string,
    age: number
  }) {
    this.age = val.age
    this.name = val.name
  }
  get info () {
    return {
      name: this.name,
      age: this.age
    }
  }
  // watch 装饰器数据监听
  // 想要监听哪个变量 就把名字写watch里
  // 然后定义一个监听函数
  @Watch('age')
  ageChange (newValue: number, oldValue:number) {
    console.log(newValue, oldValue) // 23 18
  }

  // 生命周期与之前一样
  created () {
    console.log(11)
  }
}
export default Test
</script>

<style scoped>

</style>

（二）Prop 装饰器、Emit 装饰器

父组件：

<!-- template -->
<Test :userInfo="userInfo" @changeAge="changeAge" @noParams="noParams" />

// js
class Index extends Vue {
  // 组件的数据 相当于 data(){}
  protected userInfo: {
    userName: string,
    age: number,
    sex: string
  } = {
    userName: 'zfb',
    age: 23,
    sex: '女'
  }
  // methods 中的方法
  changeAge (value:number) {
    this.age = value
  }

  noParams () {
    console.log(1)
  }
}
export default Index

子组件：

<template>
  <div>
    {
   
   { userInfo.userName }}
    {
   
   { userInfo.age }}
    {
   
   { userInfo.sex }}
    <button @click="changeAgeChild">传参数</button>
    <button @click="childNoParams">不传参数</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
@Component
class Test extends Vue {
  // Prop 接受伏组件传过来的值 里面传一个对象 指定默认值default还有类型type
  // !: 表示取消定义未赋值的报错
  @Prop({ default: {}, type: Object }) userInfo!:Object

  // Emit 装饰器要调父组件传过来的哪个方法，就把方法名当参数传进去
  // 而自组件方法 return 的值 是传递给父组件方法的参数！！
  // 45 是调用父组件方法的传参数
  @Emit('changeAge')
  changeAgeChild () {
    return 45
  }
   
  // 调用父组件方法 不传参数
  @Emit('noParams')
  childNoParams () {}
}
export default Test
</script>

<style>

</style>

（三）Model 装饰器：

子组件 修改 父组件 v-model 的值

<template>
  <div>
    <!-- template -->
    {
   
   { inputValue }}
    <Test v-model="inputValue" />
  </div>
</template>

<script lang="ts">
// 在 vue 装饰器类库中引入需要的装饰器
import { Component, Vue, Watch } from 'vue-property-decorator'
import Test from '@/components/Test.vue'
@Component({
  name: 'Index', // 组件名称
  components: { // 需要的子组件
    Test
  }
})
class Index extends Vue {
  private inputValue:string = ''
}
export default Index
</script>

<style scoped>

</style>

子组件：

<template>
  <div>
    <input :value="inputValue" @input="onChangeValue">
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Model } from 'vue-property-decorator'
@Component
class Test extends Vue {
  @Model('changeInputValue', { type: String, default: '' })
  inputValue!:string

  @Emit('changeInputValue')
  onChangeValue (e:any) {
    return e.target.value
  }
}
export default Test
</script>

<style>
input {
  border: 1px solid black;
}
</style>