vue-property-decorator

這個組件完全依賴于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>