您现在的位置是：网站首页> 编程资料编程资料
Vue装饰器中的vue-property-decorator 和 vux-class使用详解_vue.js_
2023-05-24
583人已围观
简介 Vue装饰器中的vue-property-decorator 和 vux-class使用详解_vue.js_
目前在用vue开发的项目中，都会配合使用TypeScript进行一些约束。为了提高开发效率，往往会使用装饰器来简化我们的代码。
本文主要介绍装饰器vue-property-decorator 和 vux-class的使用。
1. 安装
npm i -S vue-property-decorator npm i -S vuex-class
2. vue-property-decorator
@Component@Prop@PropSync@Model@ModelSync@Watch@Provide@Inject@ProvideReactive@InjectReactive@Emit@Ref@VModel
@Component
import { Vue, Component } from 'vue-property-decorator' @Component({ components:{ componentA, componentB, } }) export default class MyComponent extends Vue{ } 相当于：
export default{ name: 'MyComponent', components:{ componentA, componentB, } } @Prop
@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator表示：@Prop装饰器接收一个参数，这个参数可以有三种写法：
- PropOptions：可以使用以下选项：type，required，default，validator
- Constructor：例如String，Number，Boolean等，指定 prop 的类型
- Constructor[]：指定 prop 的可选类型
例如：
import { Vue, Component, Prop } from 'vue-property-decorator' @Component export default class MyComponent extends Vue { @Prop(Number) readonly propA: number | undefined @Prop({ default: 'default value' }) readonly propB!: string @Prop([String, Boolean]) readonly propC: string | boolean | undefined } 相当于：
export default { name: 'MyComponent', props: { propA: { type: Number, }, propB: { default: 'default value', }, propC: { type: [String, Boolean], }, }, @PropSync
@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator - propName 表示父组件传递过来的属性名
- 父组件要结合
.sync来使用
例如：
// child.vue import { Vue, Component, PropSync } from 'vue-property-decorator' @Component export default class MyComponent extends Vue { @PropSync('name', { type: String }) syncedName!: string 相当于：
export default { name: 'MyComponent', props: { name: { type: String, }, }, computed: { syncedName: { get() { return this.name }, set(value) { this.$emit('update:name', value) }, }, }, } @PropSync的工作原理与@Prop类似，除了接受propName作为装饰器的参数之外，它还在幕后创建了一个计算的getter和setter。通过这种方式，您可以像使用常规数据属性一样使用该属性，同时像在父组件中添加.sync修饰符一样简单。
@Model
@Model装饰器允许我们在一个组件上自定义v-model。
@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator 例如：
import { Vue, Component, Model } from 'vue-property-decorator' @Component export default class MyComponent extends Vue { @Model('change', { type: Boolean }) readonly checked!: boolean } 相当于：
export default { model: { prop: 'checked', event: 'change', }, props: { checked: { type: Boolean, }, }, } @ModelSync
@ModelSync(propName: string, event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator 例如：
import { Vue, Component, ModelSync } from 'vue-property-decorator' @Component export default class MyComponent extends Vue { @ModelSync('checked', 'change', { type: Boolean }) readonly checkedValue!: boolean } 相当于：
export default { model: { prop: 'checked', event: 'change', }, props: { checked: { type: Boolean, }, }, computed: { checkedValue: { get() { return this.checked }, set(value) { this.$emit('change', value) }, }, }, } @Watch
@Watch(path: string, options: WatchOptions = {}) decorator 例如：
import { Vue, Component, Watch } from 'vue-property-decorator' @Component export default class MyComponent extends Vue { @Watch('child') onChildChanged(val: string, oldVal: string) {} @Watch('person', { immediate: true, deep: true }) onPersonChanged1(val: Person, oldVal: Person) {} @Watch('person') onPersonChanged2(val: Person, oldVal: Person) {} } 相当于：
export default { watch: { child: [ { handler: 'onChildChanged', immediate: false, deep: false, }, ], person: [ { handler: 'onPersonChanged1', immediate: true, deep: true, }, { handler: 'onPersonChanged2', immediate: false, deep: false, }, ], }, methods: { onChildChanged(val, oldVal) {}, onPersonChanged1(val, oldVal) {}, onPersonChanged2(val, oldVal) {}, }, } @Provide | @Inject
@Provide(key?: string | symbol) decorator @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) decorator 例如：
import { Component, Inject, Provide, Vue } from 'vue-property-decorator' const symbol = Symbol('baz') @Component export class MyComponent extends Vue { @Inject() readonly foo!: string @Inject('bar') readonly bar!: string @Inject({ from: 'optional', default: 'default' }) readonly optional!: string @Inject(symbol) readonly baz!: string @Provide() foo = 'foo' @Provide('bar') baz = 'bar' } 相当于：
const symbol = Symbol('baz') export const MyComponent = Vue.extend({ inject: { foo: 'foo', bar: 'bar', optional: { from: 'optional', default: 'default' }, baz: symbol, }, data() { return { foo: 'foo', baz: 'bar', } }, provide() { return { foo: this.foo, bar: this.baz, } }, }) @ProvideReactive | @InjectReactive
它们是@provider和@Inject的响应式版本。如果父组件修改了提供的值，那么子组件可以捕捉到这种修改。
@ProvideReactive(key?: string | symbol) decorato @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey) decorator 例如：
const key = Symbol() @Component class ParentComponent extends Vue { @ProvideReactive() one = 'value' @ProvideReactive(key) two = 'value' } @Component class ChildComponent extends Vue { @InjectReactive() one!: string @InjectReactive(key) two!: string } @Emit
@Emit(event?: string) decorator
例如：
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) }) } } 相当于：
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) }) }, }, } @Ref
Ref(refKey?: string) decorator
例如：
import { Vue, Component, Ref } from 'vue-property-decorator' import AnotherComponent from '@/path/to/another-component.vue' @Component export default class MyComponent extends Vue { @Ref() readonly anotherComponent!: AnotherComponent @Ref('aButton') readonly button!: HTMLButtonElement } 相当于：
export default { computed() { anotherComponent: { cache: false, get() { return this.$refs.anotherComponent as AnotherComponent } }, button: { cache: false, get() { return this.$refs.aButton as HTMLButtonElement } } } } @VModel
@VModel(propsArgs?: PropOptions) decorator
例如：
import { Vue, Component, VModel } from 'vue-property-decorator' @Component export default class MyComponent extends Vue { @VModel({ type: String }) name!: string } 相当于：
export default { props: { value: { type: String, }, }, computed: { name: { get() { return this.value }, set(value) { this.$emit('input', value) }, }, }, }
相关内容
- 自定义range sliders滑块实现元素拖动方法_JavaScript_
- Vue实现自定义字段导出EXCEL的示例代码_vue.js_
- vue使用csp的简单示例_vue.js_
- vue移动端项目渲染pdf步骤及问题小结_vue.js_
- Vue 组件渲染详情_javascript技巧_
- Vue组件的继承用法示例详解_vue.js_
- 一文彻底理解JavaScript原型与原型链_javascript技巧_
- 手写实现Vue计算属性_vue.js_
- ant-design-vue动态表格合并案例_vue.js_
- 一文详解JavaScript 如何将 HTML 转成 Markdown_javascript技巧_
点击排行
本栏推荐
