decorator使用手册(2)

export default { watch: { msg: [ { handler: 'onMsgChanged', immediate: false, deep: false } ], arr: [ { handler: 'onArrChanged1', immediate: true, deep: true }, { handler: 'onArrChanged2', immediate: false, deep: false } ] }, methods: { onMsgVhanged(newValue, oldValue) {}, onArrChange1(newValue, oldValue) {}, onArrChange2(newValue, oldValue) {} } }

6，@Emit(event?: string)

@Emit 装饰器接收一个可选参数，该参数是 $Emit 的第一个参数，充当事件名。如果没有提供这个参数， $Emit 会将回调函数名的 camelCase 转为 kebab-case ，并将其作为事件名；

@Emit 会将回调函数的返回值作为第二个参数，如果返回值是一个 Promise 对象， $emit 会在 Promise 对象被标记为 resolved 之后触发；

@Emit 的回调函数的参数，会放在其返回值之后，一起被 $emit 当做参数使用。

import { Vue, Component, Emit } from 'vue-property-decorator' @Component export default class MyComponent extends Vue { count = 0 @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) }) } }

等同于下面的 js 写法

export default { data() { return { count: 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) }) } } }

7，@Ref(refKey?: string)

@Ref 装饰器接收一个可选参数，用来指向元素或子组件的引用信息。如果没有提供这个参数，会使用装饰器后面的属性名充当参数

import { Vue, Component, Ref } from 'vue-property-decorator' import { Form } from 'element-ui' @Componentexport default class MyComponent extends Vue { @Ref() readonly loginForm!: Form @Ref('changePasswordForm') readonly passwordForm!: Form public handleLogin() { this.loginForm.validate(valide => { if (valide) { // login... } else { // error tips } }) } }

等同于下面的 js 写法

export default { computed: { loginForm: { cache: false, get() { return this.$refs.loginForm } }, passwordForm: { cache: false, get() { return this.$refs.changePasswordForm } } } }

@Provide/@Inject 和 @ProvideReactive/@InhectReactive

由于平时基本不用到provide/inject选项，暂时先放着，以后有时间再研究

参考： https://github.com/kaorun343/...

总结

以上所述是小编给大家介绍的vue-property-decorator使用手册,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章: