在Vue2.0中使用TypeScript语法时，需要引用 vue-property-decorator。
为了更好地用class的模式来写vue组件:
1.methods，钩子都可以直接写作class的方法
2.computed属性可以直接通过get来获得
3.初始化data可以声明为class的属性
4.其他的都可以放到Component装饰器里
vue-property-decorator深度依赖了于vue-class-component，拓展出了更多操作符： @Prop、@Emit、 @Inject、@Model、@Provide、@Watch；等可以写在class里面
使用
当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:
data对象
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
ValA: string = "hello world";
ValB: number = 1;
}
</script>
等同于
<scrip>
export default {
data(){
return {
ValA: 'hello world',
ValB: 1
}
}
}
</script>
- 总结: data对象（可以直接声明为class的属性）
计算属性
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
get ValA(){
return 1;
}
}
</script>
等同于
<script lang="es6">
import Vue from 'vue';
export default {
computed: {
ValA: function() {
return 1;
}
}
}
</script>
- 总结: 对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可.
原本Vue中的computed里的每个计算属性都变成了在前缀添加get的函数.
事件的监听与触发
<script lang="ts">
import {Vue, Component,Emit} from 'vue-property-decorator';
@Component({})
export default class Home extends Vue{
count = 0
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount(){
this.count = 0
}
@Emit()
returnValue(){
return 10
}
@Emit()
onInputChange(e) {
return e.target.value
}
@Emit()
promise() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
</script>
等同于
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)
},
onInputChange(e) {
this.$emit('on-input-change', e.target.value, e)
},
promise() {
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve(20)
}, 0)
})
promise.then((value) => {
this.$emit('promise', value)
})
},
},
}
- 总结: 在
@Emit装饰器的函数会在运行之后触发等同于其函数名(驼峰式会转为横杠式写法)的事件, 如果我们想触发特定的事件,我们只需要给装饰器@Emit传递一个事件名参数reset,这样函数emitTodo运行之后就会触发特定事件.@Emit修饰的函数所接受的参数会在运行之后触发事件的时候传递过去.
@Emit触发事件有两种写法
1.@Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
2.@Emit(name: string),里面传递一个字符串,该字符串为要触发的事件名.
watch
import {Vue, Component, Watch} from 'vue-property-decorator';
@Watch('child')
onChangeValue(newVal: string, oldVal: string){
// todo...
}
@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){
// todo...
}
等同于
export default{
watch: {
'child': this.onChangeValue
// 这种写法默认 `immediate`和`deep`为`false`
,
'person': {
handler: 'onChangeValue',
immediate: true,
deep: true
}
},
methods: {
onChangeValue(newVal, oldVal){
// todo...
}
}
}
- 总结:
@Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象.@Watch所装饰的函数即监听到属性变化之后的操作.
Prop
比如子组件从父组件接收三个属性propA,propB,propC.
propA类型为Number
propB默认值为default value
propC类型为String或者Boolean
<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
@Prop(Number) propA!: number;
@Prop({ type: String }) msg!: string;
@Prop({default: 'default value'}) propB!: string;
@propC([String, Boolean]) propC: string | boolean;
}
</script>
这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值.
等同于
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
},
}
}
- 总结:
@Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型.
Mixins
一种是vue-class-component提供的.
//定义要混合的类 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component';
@Component // 一定要用Component修饰
export default class myMixins extends Vue {
value: string = "Hello"
}
// 引入
import Component {mixins} from 'vue-class-component';
import myMixins from 'mixins.ts';
@Component
export class myComponent extends mixins(myMixins) {
// 直接extends myMinxins 也可以正常运行
created(){
console.log(this.value) // => Hello
}
}
第二种方式是在@Component中混入.
我们改造一下mixins.ts,定义vue/type/vue模块,实现Vue接口
// mixins.ts
import { Vue, Component } from 'vue-property-decorator';
declare module 'vue/types/vue' {
interface Vue {
value: string;
}
}
@Component
export default class myMixins extends Vue {
value: string = 'Hello'
}
//混入
import { Vue, Component} from 'vue-property-decorator';
import myMixins from './Mixins';
@Component({
mixins: [myMixins],
created(){
console.log(this.value) // => Hello
}
})
export default class myComponent extends Vue{}
- 总结: 两种方式不同的是在定义mixins时如果没有定义vue/type/vue模块, 那么在混入的时候就要继承该mixins; 如果定义vue/type/vue模块,在混入时可以在
@Component中mixins直接混入.
Model
Vue组件提供model: {prop?: string, event?: string}让我们可以定制prop和event.
默认情况下，一个组件上的v-model 会把 value用作 prop且把 input用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。
下面是Vue官网的例子
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代码相当于：
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
即foo双向绑定的是组件的checke, 触发双向绑定数值的事件是change
使用vue-property-decorator提供的@Model改造上面的例子.
import { Vue, Component, Model} from 'vue-property-decorator';
@Component
export class myCheck extends Vue{
@Model ('change', {type: Boolean}) checked!: boolean;
}
- 总结, @Model()接收两个参数, 第一个是event值, 第二个是prop的类型说明, 与@Prop类似, 这里的类型要用JS的. 后面在接着是prop和在TS下的类型说明.
