在vue中使用TS相信大家网上能找到很多实践方案,我之前也写过一个DEMO,GIT地址:https://github.com/seizeDev/vue-ts
光有DEMO没有什么用,还是要具体到业务层中使用具体的API,所以给大家介绍一下,子组件怎么接受props,怎么引入vuex,怎么使用mixins,其实这些才是我们用TS+VUE的主要方案,TS是为了规范代码,规范书写格式和检查静态变量。
在vue 中使用TS最重要的插件就是vue-property-decorator,而这个插件主要是干什么的呢?可以看博客园这边文章:https://www.cnblogs.com/crazycode2/p/7821389.html,如果客官不想跳入的话,那我给大家简洁的说一下:
在vue-property-decorator里面有几个内置的装饰器,在JAVA中叫注解,其实我理解他们应该属于一类的,有以下几个装饰器:model(这个是双向数据绑定的,就是子传给父元素执行的),component(初始注入,除了vue-property-decorator提供的,其他的VUE实例方法都在这里面注入),watch(监听变化),provide(组件内使用参数),prop(子组件接收参数).
使用方式: improt {Model,Component,Watch,Provide} from 'vue-property-decorator';
然后一项一项的来介绍:
1、model:
子元素
import
{ Component, Model } from
'vue-property-decorator'
@Component
export
default
class
MyCheckbox
extends
Vue {
@Model(
'change'
) checked: boolean
changed(ev) {
this
.$emit(
'change'
, ev.target.checked)
}
}
父元素
<template>
<div>
<MyCheckbox :label=
"checkbox.label"
:id=
"checkbox.id"
v-model=
"checkbox.checked"
/>
</div>
</template>
<script lang=
"ts"
>
import
Vue from
'vue'
import
{Component} from
'vue-property-decorator'
import
MyCheckbox from
'./MyCheckBox.vue'
@Component({
components: {
MyCheckbox
}
})
这个主要是子传给父元素的v-model,但还有一种方式,就是在子元素中执行this.$emit('input',值);这种方式也可以直接改变在父元素绑定的v-model的值
2、watch:
<template>
<div
class
=
"hello"
>
<button @click=
"clicked"
>Click</button> {{sum.acum}}
</div>
</template>
<script lang=
"ts"
>
import
Vue from
'vue'
import
{Component, Watch} from
'vue-property-decorator'
@Component({
})
export
default
class
Hello
extends
Vue {
sum = {
acum: 0
}
@Watch(
'sum'
, {deep:
true
})
watchCount(newVal, oldVal) {
console.log(
"newVal"
, newVal,
"oldVal"
, oldVal)
}
clicked() {
this
.sum.acum++;
}
}
</script>
在这个方法中一定要注意:
@Watch(
'sum'
, {deep:
true
})底下的那个方法是watch事件触发时执行的方法。你需要监听多少个参数,就需要@watch多少下
3、provide :
这个没啥好说的,看代码就行了
4、prop
这个也没啥好说的:
5、VUEX的使用
改变值的时候直接调用dispatch
6、使用mixins
mixins里面需要在component里面注入:
mixin.ts:
其实上面这些基本上包含了所有在vue+ts中遇到的情况,其他的像过滤器、指令正常在main.ts里面写就行了,除了mixin那块其他的代码都在我文章前面说的那个git上,如果mixin那块有遇到问题的话可以给我留言。
说实话,在vue+ts网上这块没有一篇文章讲得很彻底的,我这篇文章里面包含的我感觉还是很全面的,希望能帮到大家。