vue插件之vue-property-decorator

这里我要介绍的不是vue自带的vue-class-component而要说的的是vue-property-decorator，因为我在项目中发现了这更好用，下面就我所用到的常用api做一个归纳。

首先安装依赖yarn add -S vue-property-decorator

mixins

混入的意思，相当于复制这个对象的属性方法到组件里,下面使用TypeScript的vue的class组件举例

import Vue from 'vue'
import {Component} from "vue-property-decorator"

@Component
export default class Hello extends Vue{
    a=1
}

import Vue from 'vue'
import {Component,Mixins} from "vue-property-decorator"

@Component
export default class HelloWorld extnds Mixins[Hello]{
    created(){
        console.log(this.a) //a就会被传进来并显示a
    }
}

如果混入的数据，方法重名了，那么就会覆盖mixins组件里的数据、方法，这其实和Vue里面的extends的功能类似。

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

@Props

接受外部属性

impotr Vue from 'vue'
import {Component,Props} from 'vue-property-decorator'

@Component
export default class HelloWord extends Vue{
    @Props({type:Number,default:0,}) readonly value:number
}

表示接受组件传入的value值，类型是Number，默认值为0，而且是只读的。

@Watch

用于监听数据

import Vue from 'vue'
import {Component, Watch} from 'vue-property-decorator'

@Component
export default class HelloWord extends Vue {
  @Props(String) readonly child!:string
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {
      console.log(`我从${oldVal}变成${val}了`)
      this.$emit('update:value',val)
  }

当外部传入的child发生变化时，就执行函数onChildChanged，并触发emit方法。

@Provide/@Inject

这里就简单举一个例子。

import Vue from 'vue'
import { Component, Inject, Provide} from 'vue-property-decorator'

const symbol = Symbol('baz')

@Component
export class Helloworld extends Vue {
  @Inject() readonly foo!: string
  @Inject('bar') readonly bar!: string
  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string
  @Inject(symbol) readonly baz!: string

  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'
}