vue TS使用props,vuex,mixins详解

原创 2018年04月15日 21:57:39

在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网上这块没有一篇文章讲得很彻底的,我这篇文章里面包含的我感觉还是很全面的,希望能帮到大家。

vue的mixins属性

首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要改变一个标签的属性,因为项目中有多个地方都要改(业务逻辑相同),所以就看有没办法只...
  • u014452812
  • u014452812
  • 2017-08-23 19:44:38
  • 1077

Vue.js Mixins 混入使用

Mixins一般有两种用途: 1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。 2、很多地方都会用到的公用方法,用混入的方法可以减少代码量...
  • sinat_17775997
  • sinat_17775997
  • 2017-08-02 09:49:43
  • 3467

Vue全家桶+TypeScript使用总结

前言 最近重构了我之前项目 qq 音乐移动端,使用的技术是 vue,vuex,vue-router,和 typescript,在这期间,遇到的问题还是蛮多的,一会儿我会把我遇到的问题以及解决方...
  • qq_33699981
  • qq_33699981
  • 2018-03-01 14:19:06
  • 771

vuex的demo

  • 2017年01月04日 10:00
  • 635KB
  • 下载

Vue.js学习(三):mixins混合对象的使用

我对mixins的理解是,有点像注册了一个vue的公共方法,可以绑定在多个组件或者多个Vue对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者Vue实例对象中,仍然可以定义相同函数...
  • michael8512
  • michael8512
  • 2018-01-10 21:59:31
  • 350

VUE项目开发中使用mixins

一、mixins(混入)的认识 请参考官方文档 二、mixins的使用 个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改1、在assets...
  • kuangshp128
  • kuangshp128
  • 2017-10-07 13:46:28
  • 1120

Vue2 混入mixins

效果: native message 您的代办事项有:3 件 +   控制台输出: created in overrall created in aaa created in na...
  • xuanwuziyou
  • xuanwuziyou
  • 2017-09-18 14:20:56
  • 579

Vue中的mixins(混合)使用方法

混合来源:https://cn.vuejs.org/v2/guide/mixins.html 基础混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件...
  • itpinpai
  • itpinpai
  • 2017-10-16 11:14:57
  • 436

最详细的Vuex教程

最详细的Vuex教程什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是da...
  • H5_QueenStyle12
  • H5_QueenStyle12
  • 2017-07-19 14:59:27
  • 85648

vue mixins和extends的妙用

写在前面 vue提供了mixins、extends配置项,最近使用中发现很好用。如有不对请指正,感谢尤大提供搞笑生产工具。 混合mixins和继承extends 看看官方...
  • sinat_17775997
  • sinat_17775997
  • 2017-12-20 10:07:43
  • 473
收藏助手
不良信息举报
您举报文章:vue TS使用props,vuex,mixins详解
举报原因:
原因补充:

(最多只允许输入30个字)