vueTS使⽤props,vuex,mixins详解
光有DEMO没有什么⽤，还是要具体到业务层中使⽤具体的API，所以给⼤家介绍⼀下，⼦组件怎么接受props，怎么引⼊vuex，怎么使⽤mixins，其实这些才是我们⽤TS+VUE的主要⽅案，TS是为了规范代码，规范书写格式和检查静态变量。
在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 :
/**@augments
* 注⼊参数
*/
@ Provide()
applyStatus: Array< any> = [
{ id: [ 0, 3, 17], title:'审批中', active:true},
{ id: [ 5, 8, 10, 13], title:'待发货', active:false},
{ id: [ 14], title:'已发货', active:false},
{ id: [ 1], title:'已取消', active:false},
{ id: [ 4], title:'已拒绝', active:false}
];
config: object = {}
git使用详解cursor: number = 1; //当前在第⼏页
applyList: Array< any> = []
loading: boolean = false// 滚动触发的
clickGetList: boolean = false// 是否点击触发的
mypagesize: Number = 0// 后台返回的总页数
searchIndex = 0; //当前选中的TAB下标
enumeration: object = {}
applyTotal: Number = 0// 总条数
这个没啥好说的，看代码就⾏了
4、prop
这个也没啥好说的：
@ Prop()
isShow: false
@ Prop()
qrcodeMsg: object
@ Prop()
codeUrl: string
5、VUEX的使⽤
import { mapMutations } from'vuex'
@ Component({
components: {
fileInput
},
... mapMutations([ //vuex的dispatch
'SET_TITLE_NAME'
])
})
改变值的时候直接调⽤dispatch
this. $store. commit( 'SET_TITLE_NAME', '申请管理');
6、使⽤mixins
mixins⾥⾯需要在component⾥⾯注⼊：
import FormValidateMixin from'../../mixins/mixin'
@ Component({
components: {
fileInput
},
mixins: [ FormValidateMixin]
})
mixin.ts:
import { Vue, Component } from'vue-property-decorator' declare module'vue/types/vue' {
interface Vue {
form: Object
handleSubmit ( name: any): Promise< any>
handleReset ( name: any): void
}
}
/**
* mixins
*/
@ Component
export default class FormValidateMixin extends Vue { form: Object = {}
handleSubmit ( name: any): Promise< any> {
return new Promise(( resolve) => {
resolve()
})
}
handleReset ( name: any): void {
window. alert( `${name}`)
}
}
其实上⾯这些基本上包含了所有在vue+ts中遇到的情况，其他的像过滤器、指令正常在main.ts⾥⾯写就⾏了，除了mixin那块其他的代码都在我⽂章前⾯说的那个git上，如果mixin那块有遇到问题的话可以给我留⾔。
说实话，在vue+ts⽹上这块没有⼀篇⽂章讲得很彻底的，我这篇⽂章⾥⾯包含的我感觉还是很全⾯的，希望能帮到⼤家。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论