在 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 中