vue-property-decorator的简单使用

vue-property-decorator

提供给vue内写typescript语法的时候引入的组件（基于vue-class-component）

安装

npm i -s vue-property-decorator

基本语法

@Props

props是子组件用来接收父组件传递过来的参数

在常规的vue语法环境下的书写方式：

export default {
    props: {
        propA: {
            type: Number,
            // type: [ String,Boolean ]
            // default: 'value'
            // default: function (){ return 'hello' }
            // required: true
        }
    }
}

在vue-property-decorator组件中使用：

@Prop( options: (PropOptions | Constructor[] | Constructor )={} )

@Prop装饰器接收一个参数，这个参数的三种写法：

• constructor String、Number、Boolean等，指定prop的类型
• constructor[] 指定prop的可选类型
• propOptions 对象参数可以是 type，default，required…

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

    @Component({}) // 不管有没有组件都必须写
    export default class 组件名 extends Vue{

        @Props(Number) propA!: number;
        @Props([String,Boolean]) propB: string | boolean;
        @Props({default:'value'}) propC!: string;

    }
</script>

! 表示一定有值(非null和非undefined)， ? 表示可选

@Component

用来接收一个对象作为参数，在对象中可以声明components,filters,directives等，也可以声明computed,watch等

在常规的vue语法环境下的书写方式：

import DetailTable from './components/detail-table.vue';

export default {
    components: {
        DetailTable
    },
}

在vue-property-decorator组件中使用：

Component( options:ComponentOptions = {} )

import DetailTable from './components/detail-table.vue';
// ... 
@Component({
    components:{
        DetailTable
    },
    filters: {
        toFixed: ()=>{ ... }
    }
})
export default class 组件名 extends Vue {
    // ... 
}

@Watch

侦听数据的变化

在常规的vue语法环境下的书写方式：

watch: {
    msg: [
        {
            handler: 'onMsgChange',
            immediate: false,
            deep: false
        }
    ]
  },
  methods: {
      onMsgChange(newValue,oldValue) { }
  }

在vue-property-decorator组件中使用：

@Watch( path: string, options: WatchOptions={} )

@Watch装饰器接收两个参数：

• path：string 被侦听的属性名
• options?: WatchOptions={} options 可以包含两个属性：
  • immediate?: boolean 侦听开始之后是否立即调用该回调函数；
  • deep?: boolean 被侦听的对象的属性被改变时，是否调用该回调函数；

    export default class 组件名 extends Vue {
        @Watch('msg')
        public onMsgChange (newValue: string, oldValue: string) {
            // ... 
        }
    }

@Emit

广播方法获取变量

在常规的vue语法环境下的书写方式：

export default {
    data (){
        count: 0
    },
    methods: {
        addToCount(n) {
            this.count += n
            this.$emit('add-to-count',n)
        },
        resetCount() {
            this.count = 0
            this.$emit('reset')
        }
    }
}

@Emit(event?:string)

@Emit装饰器接收一个可选参数，作为事件名
@Emit将回调函数的返回值作为第二个参数

export default class 组件名 extends Vue{
    count = 0
    
    @Emit()
    public addToCount(n:number){
        this.count += n
    }

    @Emit('reset')
    public resetCount() {
        this.count = 0
    }
}