vuepropertydecorator的装饰器及其功能（可能不全）

vue-property-decorator具备以下几个装饰器和功能：

1.@Component(options:ComponentOptions = {})

@Component装饰器可以接收一个对象作为参数，可以在对象中声明components,filters,directives等未提供装饰器的选项，也可以声明computed,watch等

registerHooks:

除了上面介绍的将beforeRouteLeave放在Component中之外，还可以全局注册，就是registerHooks。

ps:即使没有组件也不能省略@Component，否则会报错。

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';
​
 @Component({
    components:{
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
})
export default class YourCompoent extends Vue{
   
}

2.@Prop(options:(PropOptions | Constructor[] | Constructor) = {})

我们在使用Vue时有时会遇到子组件接收父组件传递来的参数.

@Prop装饰器接收一个参数，这个参数可以有三种写法：

Constructor,例如String,Number,Boolean等，指定prop的类型；

Constructor[],指定prop的可选类型

PropOptions，可以使用以下选项:type,default,required,validator(验证器).

注意:属性的ts类型后面需要加上undefined类型;或者在属性名后面加上!，表示非null和非undefined的断言，否则额编译器会给出错误提示；

import { Vue, Component, Prop } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
​
　　@Prop([String,Number]) propB:string|number; 
　　@Prop({ 
　　　　type: String,// type: [String , Number] 
　　　　default: 'default value', // 一般为String或Number 
　　　　//如果是对象或数组的话。默认值从一个工厂函数中返回 
　　　　// defatult: () => { 
　　　　　　// return ['a','b'] 
　　　　// } 
　　　　required: true,
　　　　 validator: (value) => { return [ 'InProcess', 'Settled' ].indexOf(value) !== -1 } }) propC:string;
}

 

3.PropSync(propName:string,options:(PropOptions | Constructor[] | Constructor) = {})

@PropSync装饰器与@prop用法类似，两者的区别在于：

• @PropSync装饰器接收2个参数：

propName: string表示父组件传递过来的属性名;

options: Constructor | Constructor[] |PropOptions与@Props的第一个参数一致；

• @PropSync会生成一个新的计算属性。

注意，使用PropSync的时候是要在父组件配合.sync使用的

子组件中值发生变化会双向绑定修改父组件的值

// 父组件
<template>
  <div class="PropSync">
    <h1>父组件</h1>
    like:{{like}}
    <hr/>
    <PropSyncComponent :like.sync="like"></PropSyncComponent>
  </div>
</template>
 
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import PropSyncComponent from '@/components/PropSyncComponent.vue';
 
@Component({components: { PropSyncComponent },})
export default class PropSyncPage extends Vue {
  private like = '父组件的like';
}
</script>
 
// 子组件
<template>
  <div class="hello">
    <h1>子组件:</h1>
    <h2>syncedlike:{{ syncedlike }}</h2>
    <button @click="editLike()">修改like</button>
  </div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue, PropSync,} from 'vue-property-decorator';
 
@Component
export default class PropSyncComponent extends Vue {
  @PropSync('like', { type: String }) syncedlike!: string; // 用来实现组件的双向绑定,子组件可以更改父组件穿过来的值
 
  editLike(): void {
    this.syncedlike = '子组件修改过后的syncedlike!'; // 双向绑定,更改syncedlike会更改父组件的like
  }
}
</script>

@Provide、@Inject提供一个父子组件以及兄弟组件的一种传递数据的方式，父子组件传递数据的实现方式：

父组件

import { Component, Provide, Vue } from 'vue-property-decorator'
​
@Component
export class Parent extends Vue {
  @Provide('foo') foo = 'foo';
  @Provide('bar') baz = 'bar';
}

子组件

import { Component, Inject, Vue } from 'vue-property-decorator'
​
@Component
export class Parent extends Vue {
  @Inject() readonly foo!: string;
  @Inject() readonly baz !: string;
}

4.@Model(event?:string,options:(PropOptions | Constructor[] | Constructor) = {})

@Model()在组件上自定义v-model语法糖，接收两个参数event:string事件名,options同@Prop的参数

@Model('change',{type:string}) readonly name!:string;

@ModelSync()语法用法同@Model,不同的是接收三个参数，参数一为父组件应用处传递的参数名，参数二为event事件名，参数三位options，@ModelSync()生成返回一个新的双向绑定计算属性

@ModelSync('checked','change',{type:Boolean})

readonly checkedValue!:boolean;

 

@Watch()接收两个参数，参数一为监听的属性名，参数二为一个对象

{immediate?: boolean, deep?:boolean}第一个表示监听开始后是否立即调用回调函数，第二个表示监听的属性变化时是否调用回调函数

@Watch('name')

onNameChanged(newVal:string, oldVal: string){}

 

@Emit()接收一个可选参数为第一个广播的事件名参数，如果没有提供该参数会将回调函数名的驼峰写法转化为中划线的写法作为广播触发的事件名@Emit会将回调函数的返回值作为第二个参数，如果返回值为一个Promise对象，emit会在Promise-resolved后触发

@Emit('del') private delEmit(e: MouseEvent){}

@Emit()//省略参数将使用回调函数名，转化为中划线@add-data

addData(data: any){return '';}//如果此处不return，则使用函数参数data