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（简书）
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
}
})
网友评论