vue-property-decorator用法

vue-property-decorator這個庫徹底依賴於vue-class-component，因此在使用這個庫以前請先閱讀它, 無論啥反正都是裝飾器而已

 

vue-property-decorator

這個組件徹底依賴於vue-class-component.它具有如下幾個屬性:

• @Component (徹底繼承於vue-class-component)
• @Emit
• @Inject
• @Provice
• @Prop
• @Watch
• @Model
• Mixins (在vue-class-component中定義);

使用

當咱們在vue單文件中使用TypeScript時,引入vue-property-decorator以後,script中的標籤就變爲這樣:

<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({}) export default class "組件名" extends Vue{ ValA: string = "hello world"; ValB: number = 1; } </script> 

等同於

<script lang="es6"> import Vue from 'vue'; export default { data(){ return { ValA: 'hello world', ValB: 1 } } } </script> 

• 總結: 對於data裏的變量對頂,咱們能夠直接按ts定義類變量的寫法寫就能夠

那麼若是是計算屬性呢? 這就要用到getter了.

<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({}) export default class "組件名" extends Vue{ get ValA(){ return 1; } } </script> 

等同於

<script lang="es6"> import Vue from 'vue'; export default { computed: { ValA: function() { return 1; } } } </script> 

• 總結: 對於Vue中的計算屬性,咱們只須要將該計算屬性名定義爲一個函數,並在函數前加上get關鍵字便可.

本來Vue中的computed裏的每一個計算屬性都變成了在前綴添加get的函數.

---

@Emit

關於Vue中的事件的監聽與觸發,Vue提供了兩個函數$emit和$on.那麼在vue-property-decorator中如何使用呢?
這就須要用到vue-property-decorator提供的@Emit屬性.

<script lang="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component({}) export default class "組件名" extends Vue{ mounted(){ this.$on('emit-todo', function(n) { console.log(n) }) this.emitTodo('world'); } @Emit() emitTodo(n: string){ console.log('hello'); } } </script> 

運行上面的代碼會打印 'hello' 'world', 爲何呢? 讓咱們來看看它等同於什麼

<script lang="es6"> import Vue from 'vue'; export default { mounted(){ this.$on('emit-todo', function(n) { console.log(n) }) this.emitTodo('world'); }, methods: { emitTodo(n){ console.log('hello'); this.$emit('emit-todo', n); } } } </script> 

能夠看到,在@Emit裝飾器的函數會在運行以後觸發等同於其函數名(駝峯式會轉爲橫槓式寫法)的事件, 並將其函數傳遞給$emit.
若是咱們想觸發特定的事件呢,好比在emitTodo下觸發reset事件:

<script lang="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component({}) export default class "組件名" extends Vue{ @Emit('reset') emitTodo(n: string){ } } </script> 

咱們只須要給裝飾器@Emit傳遞一個事件名參數reset,這樣函數emitTodo運行以後就會觸發reset事件.

• 總結:在Vue中咱們是使用$emit觸發事件,使用vue-property-decorator時,能夠藉助@Emit裝飾器來實現.@Emit修飾的函數所接受的參數會在運行以後觸發事件的時候傳遞過去.
  @Emit觸發事件有兩種寫法

1. @Emit()不傳參數,那麼它觸發的事件名就是它所修飾的函數名.
2. @Emit(name: string),裏面傳遞一個字符串,該字符串爲要觸發的事件名.

---

@Watch

咱們能夠利用vue-property-decorator提供的@Watch裝飾器來替換Vue中的watch屬性,以此來監聽值的變化.

在Vue中監聽器的使用以下:

export default{ watch: { 'child': this.onChangeValue // 這種寫法默認 `immediate`和`deep`爲`false` , 'person': { handler: 'onChangeValue', immediate: true, deep: true } }, methods: { onChangeValue(newVal, oldVal){ // todo... } } } 

那麼咱們如何使用@Watch裝飾器來改造它呢?

import {Vue, Component, Watch} from 'vue-property-decorator'; @Watch('child') onChangeValue(newVal: string, oldVal: string){ // todo... } @Watch('person', {immediate: true, deep: true}) onChangeValue(newVal: Person, oldVal: Person){ // todo... } 

• 總結: @Watch使用很是簡單,接受第一個參數爲要監聽的屬性名 第二個屬性爲可選對象.@Watch所裝飾的函數即監聽到屬性變化以後的操做.

---

@Prop

咱們在使用Vue時有時會遇到子組件接收父組件傳遞來的參數.咱們須要定義Prop屬性.

好比子組件從父組件接收三個屬性propA,propB,propC.

• propA類型爲Number
• propB默認值爲default value
• propC類型爲String或者Boolean

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

咱們使用vue-property-decorator提供的@Prop能夠將上面的代碼改造爲以下:

<script lang="ts"> import {Vue, Component, Prop} from 'vue-property-decorator'; @Component({}) export default class "組件名" extends Vue{ @Prop(Number) propA!: number; @Prop({default: 'default value'}) propB!: string; @propC([String, Boolean]) propC: string | boolean; } </script> 

這裏 !和可選參數?是相反的, !告訴TypeScript我這裏必定有值.

• 總結: @Prop接受一個參數能夠是類型變量或者對象或者數組.@Prop接受的類型好比Number是JavaScript的類型,以後定義的屬性類型則是TypeScript的類型.

---

Mixins

在使用Vue進行開發時咱們常常要用到混合,結合TypeScript以後咱們有兩種mixins的方法.

一種是vue-class-component提供的.

//定義要混合的類 mixins.ts import Vue from 'vue'; import Component from 'vue-class-component'; @Component // 必定要用Component修飾 export default class myMixins extends Vue { value: string = "Hello" } 

// 引入 import Component {mixins} from 'vue-class-component'; import myMixins from 'mixins.ts'; @Component export class myComponent extends mixins(myMixins) { // 直接extends myMinxins 也能夠正常運行 created(){ console.log(this.value) // => Hello } } 

第二種方式是在@Component中混入.

咱們改造一下mixins.ts,定義vue/type/vue模塊,實現Vue接口

// mixins.ts import { Vue, Component } from 'vue-property-decorator'; declare module 'vue/types/vue' { interface Vue { value: string; } } @Component export default class myMixins extends Vue { value: string = 'Hello' } 

混入

import { Vue, Component, Prop } from 'vue-property-decorator'; import myMixins from '@static/js/mixins'; @Component({ mixins: [myMixins] }) export default class myComponent extends Vue{ created(){ console.log(this.value) // => Hello } } 

• 總結: 兩種方式不一樣的是在定義mixins時若是沒有定義vue/type/vue模塊, 那麼在混入的時候就要繼承該mixins; 若是定義vue/type/vue模塊,在混入時能夠在@Component中mixins直接混入.

---

@Model

Vue組件提供model: {prop?: string, event?: string}讓咱們能夠定製prop和event.
默認狀況下，一個組件上的v-model 會把 value用做 prop且把 input用做 event，可是一些輸入類型好比單選框和複選框按鈕可能想使用 value prop來達到不一樣的目的。使用model選項能夠迴避這些狀況產生的衝突。

• 下面是Vue官網的例子

Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { // this allows using the `value` prop for a different purpose value: String, // use `checked` as the prop which take the place of `value` checked: { type: Number, default: 0 } }, // ... }) 

<my-checkbox v-model="foo" value="some value"></my-checkbox> 

上述代碼至關於：

<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"> </my-checkbox> 

即foo雙向綁定的是組件的checke, 觸發雙向綁定數值的事件是change

使用vue-property-decorator提供的@Model改造上面的例子.

import { Vue, Component, Model} from 'vue-property-decorator'; @Component export class myCheck extends Vue{ @Model ('change', {type: Boolean}) checked!: boolean; }