vue-property-decorator

1:安装npm install --save vue-property-decorator

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

平常用法

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

import {Component, Prop} from 'vue-property-decorator'

@Prop({

        type: String,  //type: [String, Number]

        default: 'Default Value', //一般String或者Number类型

        require: true,

        //如果是对象或数组的话。默认值从一个工厂函数中返回

        default: function () {

            return { message: 'hello' }

        },

        validator: function (value) {

            return ['success', 'warning','danger'].indexOf(value) !== -1

        }

    })

    msg: string;

3：@Model (组件之间，checkbox)

原来的是这样的。(我在简书中总结了v-model这个语法糖。以及组件和组件之间如何使用)

https://www.jianshu.com/p/eb68d55e5d5b（简书）

https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model(官网)

ts的使用方法

父组件没什么变化。还是照常使用  v-model = "checked"

子组件变化稍微大一点

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

<input  type="checkbox" :checked="checked" @change="change">

@Model('change') checked: boolean;

change(ev){

      this.$emit('change', ev.target.checked);

  }   

4：@Watch

平常用法

补充：immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

就是页面一开始就执行这个回调函数

watch:{

      editData:{

        handler:function(newVal, oldVal){

        },

        deep:true，

          immediate:true,

      }

    }

ts的使用方法

import {Component，Watch } from 'vue-property-decorator'

@Watch('checked',{deep: true})

  checkChange() {

        console.log(this.checked)

        console.log('变化');

  }

5：@Provide  提供  /  @Inject  注入

provide和Inject有点类似于react中的store。就是在组件嵌套层级过深时。父组件不便于向子组件传递数据。就把数据通过Provide传递下去。然后子组件通过Inject来获取

平常用法

//父组件

provide: function () {

  return {

    getMap: this.getMap

  }

}

//子组件

inject: ['getMap']

 ts的使用方法

//父级

  @Provide('users')

    users = [{

        name: 'test',

        id: 0

        } ]

//子集

import {Component，Inject} from 'vue-property-decorator'

@Inject('users') users;

mounted(){

console.log(this.users)

}

6:@Emit（子组件向父组件传递）

平常用法

this.$emit('showCityName',data);

ts用法

@Emit('changeName')

  greet(this){

      /code/

  };

但是this.$emit('showCityName',data);这种用法可以给父组件传递参数。

但是下面ts的用法@Emit()他只接受0到1个参数。所以还不知道该怎么给父组件传值。

7: @Component (exported from vue-class-component)

平常用法

import OrderDetail from 'component/OrderMess';

components:{

    orderTable

},

ts用法

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

@Component({

    components: {

        HelloWorld

    }

})