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)
  }
}

父元素

<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
    }
})

这个主要是子传给父元素的NG-MODEL,但还有一种方式,就是在子元素中执行this.$emit('input',值);这种方式也可以直接改变在父元素绑定的ng-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 = {}
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网上这块没有一篇文章讲得很彻底的,我这篇文章里面包含的我感觉还是很全面的,希望能帮到大家。

阅读更多
个人分类: JS vue typescript
上一篇dva model里面需要注意的几个点
下一篇浏览器调用支付宝授权用户信息
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭