vue-property-decorator用法详解

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>