vue-property-decorator用法介绍

前言

在Vue2.0中使用TypeScript语法时，需要引用 vue-property-decorator。

vue-property-decorator 完全依赖于vue-class-component，因此在使用vue-property-decorator之前可以先了解下vue-class-component。

Install

npm i -S vue-class-component
npm i -S vue-property-decorator 

用法

这里有几个装饰器和一个函数(Mixin):

• @Prop
• @PropSync
• @Model
• @ModelSync
• @Watch
• @Provide
• @Inject
• @ProvideReactive
• @InjectReactive
• @Emit
• @Ref
• @VModel
• @Component (由 vue-class-component 提供)
• Mixins (mixins 函数 由 vue-class-component 提供)

示例

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

<script lang="ts"> import { Vue, Component } from 'vue-property-decorator' @Component export default class extends Vue { } </script> 

组件引用

import { Component, Vue } from "vue-property-decorator"; import DemoComponent"./DemoComponent.vue"; @Component({ components: { DemoComponent } }) export default class YourComponent extends Vue { } 

@Prop 父子组件之间值的传递

<script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { @Prop(Number) readonly propA: number | undefined } </script> 

相当于

export default { props: { propA: { type: Number, } }, } 

如果你不想设置每个prop的type类型，你可以使用reflect-metadata.

npm install reflect-metadata -D 

<script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator' import 'reflect-metadata' @Component export default class extends Vue { @Prop() age!: number } </script> 

@PropSync
相当于在父组件中添加.sync装饰器, 使子组件也可以更新prop的值。具体查看.sync 修饰符

<script lang="ts"> import { Vue, Component, PropSync } from 'vue-property-decorator' @Component export default class extends Vue { @PropSync('name', { type: String }) syncedName!: string; // 用来实现组件的双向绑定 changeName(): void { this.syncedName = '子组件修改过后的syncedName!'; // 更改syncedName会更改父组件的name } } </script> 

@Watch 监听属性

import { Vue, Component, Watch } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { @Watch('child') onChildChanged(val: string, oldVal: string) {} @Watch('person', { immediate: true, deep: true }) onPersonChanged1(val: Person, oldVal: Person) {} } 

相当于：

export default { watch: { child: [ { handler: 'onChildChanged', immediate: false, deep: false, }, ], person: [ { handler: 'onPersonChanged1', immediate: true, deep: true, } ], }, methods: { onChildChanged(val, oldVal) {}, onPersonChanged1(val, oldVal) {} }, } 

@Emit

import { Vue, Component, Emit } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { @Emit() addToCount(n: number) { } @Emit('reset') resetCount() { this.count = 0 } } 

相当于：

export default { methods: { addToCount(n) { this.$emit('add-to-count', n) }, resetCount() { this.$emit('reset') } } 

mixins 混入公共方法

import { Component, Vue } from "vue-property-decorator"; import mixinsMethod from '@/plugins/mixins.js'; @Component({ components: {}, mixins:[mixinsMethod] }) export default class YourComponent extends Vue { } 

计算属性
使用时只需 get 开头 + 方法 + 返回值

import { Component, Vue } from "vue-property-decorator"; @Component export default class YourComponent extends Vue { type: number = 0 // 计算属性 get getName() { let type: any = { 1: 'Taobao', 2: 'Pdd', }; return type[this.type]; } } 

vue-property-decorator - npm
vue-class-component

作者：Vigueur
链接：https://www.jianshu.com/p/03bfb12da141
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。