詳解vue-property-decorator使用手冊

2019-11-19 11:06:33

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

一，安裝

npm i -s vue-property-decorator

二，用法

1，@Component(options:ComponentOptions = {})

@Component 裝飾器可以接收一個對象作為參數(shù)，可以在對象中聲明 components ，filters，directives 等未提供裝飾器的選項

雖然也可以在 @Component 裝飾器中聲明 computed，watch 等，但并不推薦這么做，因為在訪問 this 時，編譯器會給出錯誤提示

import { Vue, Component } from 'vue-property-decorator'@Component({ filters: { toFixed: (num: number, fix: number = 2) => { return num.toFixed(fix) } }})export default class MyComponent extends Vue { public list: number[] = [0, 1, 2, 3, 4] get evenList() { return this.list.filter((item: number) => item % 2 === 0) }}

2，@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

@Prop 裝飾器接收一個參數(shù)，這個參數(shù)可以有三種寫法：

Constructor ，例如 String，Number，Boolean 等，指定 prop 的類型；
Constructor[] ，指定 prop 的可選類型；
PropOptions ，可以使用以下選項： type，default，required，validator 。

import { Vue, Component, Prop } from 'vue-property-decorator'@Componentexport default class MyComponent extends Vue { @Prop(String) propA: string | undefined @Prop([String, Number]) propB!: string | number @Prop({ type: String, default: 'abc' }) propC!: string}

等同于下面的 js 寫法

export default { props: { propA: { type: Number }, propB: { default: 'default value' }, propC: { type: [String, Boolean] } }}

注意：

屬性的ts類型后面需要加上 undefined 類型；或者在屬性名后面加上!，表示非null 和非undefined
的斷言，否則編譯器會給出錯誤提示；
指定默認值必須使用上面例子中的寫法，如果直接在屬性名后面賦值，會重寫這個屬性，并且會報錯。

3，@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})

@PropSync 裝飾器與 @prop 用法類似，二者的區(qū)別在于：
@PropSync 裝飾器接收兩個參數(shù)：

propName: string 表示父組件傳遞過來的屬性名；

options: Constructor | Constructor[] | PropOptions 與 @Prop 的第一個參數(shù)一致；

@PropSync 會生成一個新的計算屬性。

import { Vue, Component, PropSync } from 'vue-property-decorator'@Componentexport default class MyComponent extends Vue { @PropSync('propA', { type: String, default: 'abc' }) syncedPropA!: string}

等同于下面的 js 寫法

export default { props: { propA: { type: String, default: 'abc' } }, computed: { syncedPropA: { get() { return this.propA }, set(value) { this.$emit('update:propA', value) } } }}

注意： @PropSync 需要配合父組件的 .sync 修飾符使用

4，@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})

@Model 裝飾器允許我們在一個組件上自定義 v-model ，接收兩個參數(shù)：

event: string 事件名。

options: Constructor | Constructor[] | PropOptions 與 @Prop 的第一個參數(shù)一致。

import { Vue, Component, Model } from 'vue-property-decorator'@Componentexport default class MyInput extends Vue { @Model('change', { type: String, default: '123' }) value!: string}

等同于下面的 js 寫法

export default { model: { prop: 'value', event: 'change' }, props: { value: { type: String, default: '123' } }}

上面例子中指定的是 change 事件，所以我們還需要在 template 中加上相應的事件：

<template> <input type="text" :value="value" @change="$emit('change', $event.target.value)" /></template>

對自定義v-model 不太理解的同學，可以查看自定義事件

5，@Watch(path: string, options: WatchOptions = {})

@Watch 裝飾器接收兩個參數(shù)：

path: string 被偵聽的屬性名；
options?: WatchOptions={} options 可以包含兩個屬性：

immediate?:boolean 偵聽開始之后是否立即調(diào)用該回調(diào)函數(shù)；

deep?:boolean 被偵聽的對象的屬性被改變時，是否調(diào)用該回調(diào)函數(shù)；

偵聽開始，發(fā)生在 beforeCreate 勾子之后， created 勾子之前

import { Vue, Component, Watch } from 'vue-property-decorator'@Componentexport default class MyInput extends Vue { @Watch('msg') onMsgChanged(newValue: string, oldValue: string) {} @Watch('arr', { immediate: true, deep: true }) onArrChanged1(newValue: number[], oldValue: number[]) {} @Watch('arr') onArrChanged2(newValue: number[], oldValue: number[]) {}}

等同于下面的 js 寫法

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 裝飾器接收一個可選參數(shù)，該參數(shù)是 $Emit 的第一個參數(shù)，充當事件名。如果沒有提供這個參數(shù)， $Emit 會將回調(diào)函數(shù)名的 camelCase 轉(zhuǎn)為 kebab-case ，并將其作為事件名；
@Emit 會將回調(diào)函數(shù)的返回值作為第二個參數(shù)，如果返回值是一個 Promise 對象， $emit 會在 Promise 對象被標記為 resolved 之后觸發(fā)；
@Emit 的回調(diào)函數(shù)的參數(shù)，會放在其返回值之后，一起被 $emit 當做參數(shù)使用。

import { Vue, Component, Emit } from 'vue-property-decorator'@Componentexport 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 裝飾器接收一個可選參數(shù)，用來指向元素或子組件的引用信息。如果沒有提供這個參數(shù)，會使用裝飾器后面的屬性名充當參數(shù)

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/...

總結(jié)

以上所述是小編給大家介紹的vue-property-decorator使用手冊,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

上一篇：vue前后分離調(diào)起微信支付

下一篇：微信小程序new Date()方法失效問題解決方法