vue-property-decorator

Posted 2021-05-15 IT小猿人

vue-property-decorator使我们能在vue组件中写TypeScript语法，依赖于vue-class-component

 

装饰器：@Component、@Prop、@PropSync、@Model、@ModelSync、@Watch、@Emit、@Ref、@Provide、@Inject、@ProvideReactive、@InjectReactive、@VModel

 

@Component({})可以声明components、filter、directives等未提供装饰器的vue选项，也可以声明computed、watch、路由守卫函数(beforeRouteEnter、beforeRouteLeave)等

Component.registerHooks([\'beforeRouteEnter\', \'beforeRouteLeave\'])全局注册路由守卫函数

computed在class类中写法：get name(){return \'\';}

 

@Prop()参数为prop的类型声明，属性的类型声明需要加上undefined类型或者在属性名后面加上!来断言非null和非undefined

@Prop(String) name!: string | undefined;

@Prop([String, Number]) count!: string | number;

@Prop({type: Number, default: 0, (required、validator)}) age!: number;

@Prop() private name!: string;

 

@PropSync()接收两个参数：参数一为父组件传递过来的属性名，参数二同@Prop的参数，声明类型，@PropSync会生成一个新的计算属性

在父组件上属性传递需在属性后面加上.sync修饰符(:name.sync="name")

子组件中@PropSync(\'name\', {type: String}) newName!: string;

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

 

@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

 

@Ref()可选参数指向模板中的ref属性值，如果没有提供则使用装饰器后面的属性名作为参数

@Ref(\'ruleForm\') private ref!: any;

@Ref(\'btn\') readonly btnRef!: htmlButtonElement;

 

@Provide、@Inject、@ProvideReactive、@InjectReactive提供了父子组件、多层嵌套组件以及兄弟组件数据传递的方法

父组件中通过Provide传递数据：

@Provide(\'foo\') foo = \'foo\';

子组件中通过Inject获取数据：

@Inject() private foo!: string;

@ProvideReactive、@InjectReactive响应式注入，配对使用

 

@VModel

@VModel({type: String}) name!: string;

等价于js中

export default {

    props: {

        value: {

            type: String

        }

    },

    computed: {

        name: {

            get(){return this.value;},

            set(value){this.$emit(\'input\', value);}

        }

    }

}