vue-property-decorator组件的使用

当第一次打开vue3代码看到vue–property–decorator的时候是一脸懵逼，这都什么呀，后来经过了解才发现这种写法简单多了。

当我们在vue单文件中使用TypeScript时,引入vue–property–decorator之后,script中的标签就变为这样:

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

    @Component({})
    export default class App extends Vue{
        ValA: string = "英雄";
        ValB: number = 1;
    }
</script&gt;

等同于

<script lang="es6"&gt;
    import Vue from 'vue';

    export default {
        name: "App",
        data(){
            return {
                ValA: '英雄',
                ValB: 1
            }
        }
    }
</script&gt;

使用了和以往不同的写法，使用了es6的类的写法，至于为何可以使用这种写法就是因为这个组件是完全依赖于vue–class–component

在类中声明的变量其实和data中声明的是一样的，都是有双向绑定的；也就是例子中的ValA和ValB有了类型指定同时能双向绑定

现在来说一说vue–property-decorator组件的属性

@Prop

在使用Vue时有时会遇到子组件接收父组件传递来的参数.我们需要定义Prop属性。

export default {
  props: {
    propNum: {
      type: Number
    },
    propStr: {
      default: 'default value'
    },
    propArr: {
      type: [String, Boolean]
    },
  }
}

利用@prop装饰器的方法改造如下：

<script lang="ts"&gt;
    import {Vue, Component, Prop} from 'vue-property-decorator';

    @Component({})
    export default class "组件名" extends Vue{
        @Prop(Number) propNum!: number;
        @Prop({default: 'default value'}) propStr!: string;
        @propC([String, Boolean]) propArr: string | boolean;
    }
</script>

@Prop装饰器同vue中props功能相同，接收一个参数，这个参数可以有三种写法：

• Constructor：例如String，Number，Boolean等，指定 prop 的类型；

• Constructor[]：指定 prop 的可选类型；

• PropOptions：可以使用以下选项：type，default，required，validator。

需要注意的是：属性的ts类型后面需要加上undefined类型；或者在属性名后面加上!，表示非null 和 非undefined 的断言，否则编译器会给出错误提示。

@Watch

监听的是页面数据的变化比如说当值发生改变的时候触发的函数

可以利用vue–property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化。请看下面例子：

export default{
    name: "App",
    watch: {
        'userName': this.onChangeValue,/*child的一旦发生改变就会触发*/
        'userInfo': {
            handler: 'onChangeValue',
            immediate: true,
            deep: true
        }
    },
    methods: {
        onChangeValue(newVal, oldVal){
            // todo...
        }
    }
}

使用@watch修改为：

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

    @Component({})
    export default class App extends Vue{
       @watch('userName')/*child的一旦发生改变就会触发onchangeValue*/
        onchangeValue(newVal: string, oldVal: string){
            //todo...
        }
        
        @Watch('userInfo', {immediate: true, deep: true})
       onChangeValue(newVal: Person, oldVal: Person){
           // todo...
       }
        
    }
</script>

@watch()有两参数，第一个参数是监听的值，第二个参数是所装饰的函数即监听到属性变化之后的操作.比如deep：true就是表示深度监听。

注意用@watch只会监听到它下面的一个方法，如果有多个监听要写多个Watch。

@Emit

主要用于事件监听与触发，熟悉Vue的小伙伴都知道Vue提供了两个函数emit和on，主要用于兄弟组件之间传值：

<script lang="es6">
    import Vue from 'vue';

    export default {
        name: "App",
        mounted(){
            this.$on('emit-change', function(n) {
                console.log(n)
            })

            this.emitChange('王者归来');
        },
        methods: {
            emitChange(n){
                console.log('你以为是在拍电影吗');
                /*$emit就是触发emitChange事件，并且把n值传递到$on中，on中对n值进行操作*/
                this.$emit('emit-change', n);
            }
        }
    }
</script>

使用@emit修改为：

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

    @Component()
    export default class App extends Vue{
        mounted(){
            this.$on('emit-change', function(n) {
                console.log(n)
            })
           /*$on就是监听emit-change事件，并且对emit-change得到的值进行一个操作*/
            this.emitChange('王者归来');
        }

            @Emit()
        emitChange(n: string){
            console.log('你以为是在拍电影吗');
        }
    }
</script>

@Emit()其实就是把$emit给写入它装饰的类中，这样就省去了对事件的触发操作。只要在@Emit()中传入要触发的事件名@Emit(’emit-change’)

@Component

是 vue-class-component 中的装饰器修饰组件，用来为组件类添加各种“装饰属性”

简单的说，就是框架负责为类额外添加一些成员和功能，而开发者负责通过 注解 的方式 将数据传给框架，框架收到 注解 传入的数据后，可以用在类上。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ItemList from './ItemListA.vue'
import ItemList from './ItemListB.vue'
import ItemList from './ItemListC.vue'

@Component({
  components: {
    ItemListA,
    ItemListB,
    ItemListC
  },
})
export default class App extends Vue {
  
}
</script>

我们可以看到@component中传的是一个对象，对象中可以有多个属性，这里写入了 components属性；这个属性是被注入到了Vue框架中，然后通过类继承的方式把Vue中的值给到App类，从而App就有了装饰器里的属性，同样的这样的好处是Vue有了这些属性后以后的类只要继承了Vue就有了对应的属性。

@Model()

在组件上自定义v–model语法糖，接收两个参数event: string事件名，options同@Prop的参数

@Model(‘change’, {type: string}) readonly name!: string;

默认情况下，一个组件上的v–model 会把 value用作 prop且把 input用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。

下面是Vue官网的例子

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>

上述代码相当于：

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

即foo双向绑定的是组件的checked, 触发双向绑定数值的事件是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;
}

@Mixins

在使用Vue进行开发时我们经常要用到混合,结合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 也可以正常运行
      created(){
          console.log(this.value) // => Hello
    }
}

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

我们改造一下mixins.ts,定义vue/type/vue模块,实现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
    }
}

总结: 两种方式不同的是在定义mixins时如果没有定义vue/type/vue模块, 那么在混入的时候就要继承该mixins; 如果定义vue/type/vue模块,在混入时可以在@Component中mixins直接混入.