vue TS使用props,vuex,mixins详解
在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)
}
}
父元素
"checkbox.label"
:id=
"checkbox.id"
v-model=
"checkbox.checked"
/>
在这个方法中一定要注意： @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网上这块没有一篇文章讲得很彻底的，我这篇文章里面包含的我感觉还是很全面的，希望能帮到大家。