vue-property-decorator的使用

这个插件主要依赖于vue-class-component，是vue-typescript的一个简写代码插件

安装插件

npm i -S vue-property-decorator

使用

主要是script的使用发生的改变 其余没有差别

@component — 引入组件

<script>
	import { Component } from 'vue-property-decorator'  //首先要引入插件用到的装饰器
	import AdminDashboard from './admin/index.vue'

    @component({
		name: 'Dashboard', //定义当前组件的名称
		components: {
			AdminDashboard  //导入组件 多个组件之间用逗号隔开
		}
   })
</script>

@prop

import { Prop } from 'vue-property-decorator'
export default class extends Vue {
	//这里通过对象设置是否必传 以及默认值 private 是属性的访问权限 感叹号指的是非null和undefined的类型断言
	@Prop({require: true, default: 'text'}) private className ! : Number 
	
	@Prop([String, Boolean]) readonly propC: string | boolean | undefined  //readonly说明只读不可改 “ | ” 代表属性可以是什么类型
} 

@watch

 @Watch('child')
  onChildChanged(val: string, oldVal: string) {}

等同于
watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
  },
   methods: {
    onChildChanged(val, oldVal) {},
   },

@emit

@Emit()
  addToCount(n: number) {
    this.count += n
  }

  @Emit('reset')
  resetCount() {
    this.count = 0
  }

  @Emit()
  returnValue() {
    return 10
  }

  @Emit()
  onInputChange(e) {
    return e.target.value
  }

  @Emit()
  promise() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }

等同于

 methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
    },
    promise() {
      const promise = new Promise((resolve) => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })

      promise.then((value) => {
        this.$emit('promise', value)
      })
    },
  },

目前常用的更新到这里 后续再更新