vue中typescript使用vue-property-decorator

安装

npm install --save vue-property-decorator

@Prop 父子组件之间值的传递

平常用法

export default{
    props:{
        propA:String, // propA:Number
        propB:[String,Number],
        propC:{
            type:Array,
            default:()=>{
                return ['a','b']
            },
            required: true,
            validator:(value) => {
                return [
                    'a',
                    'b'
                 ].indexOf(value) !== -1
        }
    }
}
}

ts写法（自己合理搭配。其实和原先写法一样。只是把这些条件挪到了@Prop()里面）

import {Component,Vue,Prop} from vue-property-decorator;
 
@Component
export default class YourComponent extends Vue {
    @Prop(String)
    propA:string;
    
    @Prop([String,Number])
    propB:string|number;
    
    @Prop({
     type: String, // type: [String , Number]
     default: 'default value', // 一般为String或Number
      //如果是对象或数组的话。默认值从一个工厂函数中返回
      // defatult: () => {
      //     return ['a','b']
      // }
     required: true,
     validator: (value) => {
        return [
          'InProcess',
          'Settled'
        ].indexOf(value) !== -1
     }
    })
    propC:string;
    
    
}

@Model (组件之间，checkbox)

父组件中使用 v-model="checked" 子组件

js写法：

export default {
     model:{
         prop:'checked',
         event:'change'
     },
     props:{
         checked:{
             type:Boolean
         }
     },
     methods:{
         change(e){
             this.$emit('change', e.target.checked)
         }
     }
 }

ts写法：

import {Vue,Component,Model,Emit} from 'vue-property-decorator';

@Component
export default class YourComponent extends Vue{

    @Model('change',{
        type:Boolean
    })
    checked!:boolean;
    
    @Emit('change')
    change(e:MouseEvent){}
    
}

@Watch

js写法

export default {
  watch: {
    'person': {
      handler: 'onPersonChanged',
      immediate: true,
      deep: true
    }
  },
  methods: {
    onPersonChanged(val, oldVal) { }
  }
}

ts写法

import {Vue, Component, Watch} from 'vue-property-decorator';
 
@Component
export default class YourComponent extends Vue{
    @Watch('person', { immediate: true, deep: true })
    onPersonChanged(val: Person, oldVal: Person) { }
}

@Emit

由@Emit $emit 定义的函数发出它们的返回值，后跟它们的原始参数。 如果返回值是promise，则在发出之前将其解析。
如果事件的名称未通过事件参数提供，则使用函数名称。 在这种情况下，camelCase名称将转换为kebab-case。
普通js

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    promise() {
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })
 
      promise.then(value => {
        this.$emit('promise', value)
      })
    }
  }
}

ts写法

import { Vue, Component, Emit } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  count = 0
 
  @Emit()
  addToCount(n: number) {
    this.count += n
  }
 
  @Emit('reset')
  resetCount() {
    this.count = 0
  }
 
  @Emit()
  returnValue() {
    return 10
  }
 
  @Emit()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

@Provide 提供 / @Inject 注入

注：父组件不便于向子组件传递数据，就把数据通过Provide传递下去，然后子组件通过Inject来获取

父组件

<script lang='ts'>
import { Component, Vue, Provide } from "vue-property-decorator";
import LayoutHeader from "./layoutHeader.vue";
@Component({
    components: { LayoutHeader }
})
export default class Layout extends Vue {
    @Provide("users")
    users = [
        {
            name: "test",

            id: 0
        }
    ];
}

</script>

子组件代码：

<script lang='ts'>
import { Component, Vue, Inject } from "vue-property-decorator";
import { Getter } from "vuex-class";
@Component({
    components: {}
})
export default class LayoutHeader extends Vue {
    @Getter("getUser") getUser: any;
    @Inject("users") users;
    created() {
        console.log(this.users);
    }
}
</script>