vue-property-decorator用法詳解

更新時(shí)間：2019年12月12日 09:34:41 作者：Homary

這篇文章主要介紹了vue-property-decorator用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

vue-property-decorator

這個(gè)組件完全依賴于vue-class-component.它具備以下幾個(gè)屬性:

@Component (完全繼承于vue-class-component)
@Emit
@Inject
@Provice
@Prop
@Watch
@Model
Mixins (在vue-class-component中定義);

使用

當(dāng)我們?cè)趘ue單文件中使用TypeScript時(shí),引入vue-property-decorator之后,script中的標(biāo)簽就變?yōu)檫@樣:

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

總結(jié): 對(duì)于data里的變量對(duì)頂,我們可以直接按ts定義類變量的寫法寫就可以

那么如果是計(jì)算屬性呢? 這就要用到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>

總結(jié): 對(duì)于Vue中的計(jì)算屬性,我們只需要將該計(jì)算屬性名定義為一個(gè)函數(shù),并在函數(shù)前加上get關(guān)鍵字即可.

原本Vue中的computed里的每個(gè)計(jì)算屬性都變成了在前綴添加get的函數(shù).

@Emit

關(guān)于Vue中的事件的監(jiān)聽與觸發(fā),Vue提供了兩個(gè)函數(shù)$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>

運(yùn)行上面的代碼會(huì)打印 '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裝飾器的函數(shù)會(huì)在運(yùn)行之后觸發(fā)等同于其函數(shù)名(駝峰式會(huì)轉(zhuǎn)為橫杠式寫法)的事件, 并將其函數(shù)傳遞給$emit.
如果我們想觸發(fā)特定的事件呢,比如在emitTodo下觸發(fā)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傳遞一個(gè)事件名參數(shù)reset,這樣函數(shù)emitTodo運(yùn)行之后就會(huì)觸發(fā)reset事件.

總結(jié):在Vue中我們是使用$emit觸發(fā)事件,使用vue-property-decorator時(shí),可以借助@Emit裝飾器來實(shí)現(xiàn).@Emit修飾的函數(shù)所接受的參數(shù)會(huì)在運(yùn)行之后觸發(fā)事件的時(shí)候傳遞過去.

@Emit觸發(fā)事件有兩種寫法

@Emit()不傳參數(shù),那么它觸發(fā)的事件名就是它所修飾的函數(shù)名.
@Emit(name: string),里面?zhèn)鬟f一個(gè)字符串,該字符串為要觸發(fā)的事件名.

@Watch

我們可以利用vue-property-decorator提供的@Watch裝飾器來替換Vue中的watch屬性,以此來監(jiān)聽值的變化.

在Vue中監(jiān)聽器的使用如下:

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

那么我們?nèi)绾问褂聾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...
}

總結(jié): @Watch使用非常簡(jiǎn)單,接受第一個(gè)參數(shù)為要監(jiān)聽的屬性名第二個(gè)屬性為可選對(duì)象.@Watch所裝飾的函數(shù)即監(jiān)聽到屬性變化之后的操作.

@Prop

我們?cè)谑褂肰ue時(shí)有時(shí)會(huì)遇到子組件接收父組件傳遞來的參數(shù).我們需要定義Prop屬性.

比如子組件從父組件接收三個(gè)屬性propA,propB,propC.

propA類型為Number
propB默認(rèn)值為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>

這里 !和可選參數(shù)?是相反的, !告訴TypeScript我這里一定有值.

總結(jié): @Prop接受一個(gè)參數(shù)可以是類型變量或者對(duì)象或者數(shù)組.@Prop接受的類型比如Number是JavaScript的類型,之后定義的屬性類型則是TypeScript的類型.

Mixins

在使用Vue進(jìn)行開發(fā)時(shí)我們經(jīng)常要用到混合,結(jié)合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 也可以正常運(yùn)行
   created(){
     console.log(this.value) // => Hello
  }
}

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

我們改造一下mixins.ts,定義vue/type/vue模塊,實(shí)現(xiàn)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
  }
}

總結(jié): 兩種方式不同的是在定義mixins時(shí)如果沒有定義vue/type/vue模塊, 那么在混入的時(shí)候就要繼承該mixins; 如果定義vue/type/vue模塊,在混入時(shí)可以在@Component中mixins直接混入.

@Model

Vue組件提供model: {prop?: string, event?: string}讓我們可以定制prop和event.
默認(rèn)情況下，一個(gè)組件上的v-model 會(huì)把 value用作 prop且把 input用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop來達(dá)到不同的目的。使用model選項(xiàng)可以回避這些情況產(chǎn)生的沖突。

下面是Vue官網(wǎng)的例子

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>

上述代碼相當(dāng)于：

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

即foo雙向綁定的是組件的checke, 觸發(fā)雙向綁定數(shù)值的事件是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;
}

總結(jié), @Model()接收兩個(gè)參數(shù), 第一個(gè)是event值, 第二個(gè)是prop的類型說明, 與@Prop類似, 這里的類型要用JS的. 后面在接著是prop和在TS下的類型說明.

暫時(shí)常用的就這幾個(gè),還有@Provice和@Inject等用到了再寫.

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: