ADM中文网

一，安装 npm i -s vue-property-decorator 二，用法 1，@Component(options:ComponentOptions = {}) @Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives 等未提供装饰器的选项 虽然也可以在 @Component 装饰器中声明 computed，watch 等，但并不推荐这么做，因为在访问 this 时，编译器会给出错误提示 2，@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) @Prop 装饰器接收一个参数，这个参数可以有三种写法： Constructor ，例如 String，Number，Boolean 等，指定 prop 的类型； Constructor[] ，指定 prop 的可选类型； PropOptions ，可以使用以下选项： type，default，required，validator 。 等同于下面的 js 写法 注意： 属性的ts类型后面需要加上 undefined 类型；或者在属性名后面加上!，表示 非null 和 非undefined 的断言，否则编译器会给出错误提示； 指定默认值必须使用上面例子中的写法，如果直接在属性名后面赋值，会重写这个属性，并且会报错。 3，@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) @PropSync 装饰器与 @prop 用法类似，二者的区别在于： @PropSync 装饰器接收两个参数：  propName: string 表示父组件传递过来的属性名；  options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致； @PropSync 会生成一个新的计算属性。 等同于下面的 js 写法 注意： @PropSync 需要配合父组件的 .sync 修饰符使用 4，@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) @Model 装饰器允许我们在一个组件上自定义 v-model ，接收两个参数： event: string 事件名。 options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致。 等同于下面的 js 写法 上面例子中指定的是 change 事件，所以我们还需要在 template 中加上相应的事件： 对 自定义v-model 不太理解的同学，可以查看 自定义事件 5，@Watch(path: string, options: WatchOptions = {}) @Watch 装饰器接收两个参数： path: string 被侦听的属性名； options?: WatchOptions={} options 可以包含两个属性 ： immediate?:boolean 侦听开始之后是否立即调用该回调函数； deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数； 侦听开始，发生在 beforeCreate 勾子之后， created 勾子之前 等同于下面的 js 写法 6，@Emit(event?: string) @Emit 装饰器接收一个可选参数，该参数是 $Emit 的第一个参数，充当事件名。如果没有提供这个参数， $Emit 会将回调函数名的 camelCase 转为 kebab-case ，并将其作为事件名； @Emit 会将回调函数的返回值作为第二个参数，如果返回值是一个 Promise 对象， $emit 会在 Promise 对象被标记为 resolved 之后触发； @Emit 的回调函数的参数，会放在其返回值之后，一起被 $emit 当做参数使用。 等同于下面的 js 写法 7，@Ref(refKey?: string) @Ref 装饰器接收一个可选参数，用来指向元素或子组件的引用信息。如果没有提供这个参数，会使用装饰器后面的属性名充当参数 等同于下面的 js 写法 @Provide/@Inject 和 @ProvideReactive/@InhectReactive 由于平时基本不用到provide/inject选项，暂时先放着，以后有时间再研究 参考： https://github.com/kaorun343/... 总结 以上所述是小编给大家介绍的vue-property-decorator使用手册,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！