vue-property-decorator基本用法

@Component
@Emit
@Inject
@Provice
@Prop
@Watch
@Model

使用

@Component

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    @Component({
      components: {
        HolleWorld
      }
    })
    export default class "組件名" extends Vue{
        ValA: string = "hello world";
        ValB: number = 1;
    }
</script>

@Emit

vue中的事件監(jiān)聽(tīng)，vue中提供了on這兩個(gè)配合使用，vue-property-decorator的使用如下所示：

<script lang="ts">
    import {Vue, Component, Emit} from 'vue-property-decorator';
    @Component
    export default class "組件名" extends Vue{
        created(){
            this.$on('emit-dome', (n: string) => {
                console.log(n)
            })
        }
        @Emit()
        emitDome(n: string){
            console.log('hello');
        }
    }
</script>

子組件觸發(fā)父組件傳遞來(lái)的函數(shù)，父組件傳遞的函數(shù)為reset,子組件代碼：

<script lang="ts">
    import {Vue, Component, Emit} from 'vue-property-decorator';
    @Component
    export default class "組件名" extends Vue{
      @Emit('reset')
      emitTodo(n: string){}
    }
</script>

@Watch

vue-property-decorator提供的@Watch裝飾器來(lái)替換Vue中的watch屬性,以此來(lái)監(jiān)聽(tīng)值的變化

import {Vue, Component, Watch} from 'vue-property-decorator';
@Watch('child')
onChangeValue(newVal: string, oldVal: string){
    console.log("watch child");
}
@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: string, oldVal: string){
    console.log("watch person");
}

@Prop

我們?cè)谑褂肰ue時(shí)有時(shí)會(huì)遇到子組件接收父組件傳遞來(lái)的參數(shù).我們需要定義Prop屬性。比如子組件從父組件接收三個(gè)屬性propA,propB,propC。

• ValueA類(lèi)型為Number
• ValueB默認(rèn)值為default value
• ValueC類(lèi)型為String或者Boolean

我們使用vue-property-decorator提供的@Prop可以將上面的代碼改造為如下:

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

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

@Provide、@Inject提供了一個(gè)父子組件以及兄弟組件的一種傳遞數(shù)據(jù)的方式，父子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方式：
父組件：

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

@Component
export class Parent extends Vue {
  @Provide('foo') foo = 'foo';
  @Provide('bar') baz = 'bar';
}

子組件：

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

@Component
export class Parent extends Vue {
  @Inject() readonly foo!: string;
  @Inject() readonly baz !: string;
}