vue-property-decorator 插件

场景用法:

我们在Vue中使用TypeScript时,需要使用vue-property-decorator这个库,它可以把Vue2声明式的写法通过 es6 装饰器写法改造成构造函数式的写法，主要目的是让 vue 的开发模式更工程化。

首先要下载这个库

  npm install vue-class-component  
  npm install vue-property-decorator 

装饰器使用

@Component 不能省略

  
  <script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  //没有组件
  @Component
  export default class extends Vue { 
  }
  ​
  //有组件
  import Child from "./Child.vue";
  @Component({
    components: {
      Child
    }
  })
  export default class myComponent extends Vue { 
  }
  </script>

Mixins 混入公共方法

  
  //定义要混合的类 mixins.ts
  import Vue from 'vue';
  import  Component  from 'vue-class-component';
  @Component 
  export default class myMixins extends Vue {
      value: string = "Hello world"
  }
  // 引入
  import  Component  {mixins}  from 'vue-class-component';
  import myMixins from 'mixins.ts';
  @Component
  export class myComponent extends mixins(myMixins) {
        created(){
            console.log(this.value) // Hello world
      }
  }
  ​

@Prop : 组件传值 , 接收参数

接受一个参数可以是类型变量或者对象或者数组

• @Prop('String') : 指定 prop 的类型,字符串 String，Number，Boolean等

• @Prop({ default: 1, type: Number }) : 对象，指定默认值 {default:'1'}

• @Prop([String,Number]) : 数组，指定 prop 的可选类型 [String, Boolean]

  
  // js 与 ts 写法对比
  export default {
    props: {
        msg: {
          type: String,
          default: ''
        }
      }
  }
  ​
  <script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  @Component({})
  export default class myComponent extends Vue {
    // ! 告诉ts这里一定有值
    @Prop(String) msg!: string
    //对象
    @Props({type:Number,default:0,}) readonly value:number
      //数组
     @Prop([String, Number]) private sex!: string | number;
  }
  </script>
  ​
  ​

@Emit

在Vue中我们是使用$emit触发事件,使用vue-property-decorator时,可以借助@Emit装饰器来实现

写法:

@Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.

@Emit(name: string),里面传递一个字符串,该字符串为要触发的事件名.

// 父组件
<template>
  <div >
    <ChildComp @childEmit="chileEmit" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ChildComp from "./Child.vue";

@Component({ChildComp})
export default class extends Vue {
  chileEmit(n: string): void {
    console.log("子组件emit触发" ,n);
  }
}
</script>

//子组件
<template>
  <div>
    <button @click="customClickName"> @emit age+1 </button>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Vue } from "vue-property-decorator";

@Component
export default class Child extends Vue {
  //第一个参数是事件名称
  @Emit("childEmit")
  customClickName(): string {
    return "customClickName"
  }
}
</script>

@Watch 监听器

接收两个参数:

path: string 被侦听的属性名；

options?: WatchOptions={} options 可以包含两个属性 ：

可选属性: {immediate?:boolean 监听开始之后是否立即调用该回调函数,deep?:boolean 是否深度监听}

  
  export default {
   "count": {
          deep: true, // 深度侦听复杂类型内变化
          immediate:true //初次进入    
          handler (val, oldVal) {
             console.log(val, oldVal)
          }
  }
  // ts写法
  import {Vue, Component, Watch} from 'vue-property-decorator';
  ​
  @Component
  export default class Component extends Vue{
      @Watch('count', { immediate: true, deep: true })
      countChange(val: number, oldVal: number): void {}
  }

计算属性Computed

对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可.

   computed: {
          full: {
              // 给full赋值触发set方法
              set(val){
                  console.log(val)
              },
              // 使用full的值触发get方法
              get(){
                  return "myname"
              }
          }
      }
  ​
  import { Component, Vue } from "vue-property-decorator";
  @Component 
  export default class YourComponent extends Vue {
    // 计算属性  Computed
    get full() {
      return "myname"
    } 
  }
  ​

​