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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。