Vue中mixins基本用法

当项目重复出现一些相似的功能，我们就需要重复去使用相同代码段（data，method，watch、mounted等），这样会导致我们代码显得非常冗余并提高了维护难度，因为Vue官方提供了Mixins特性供我们使用。

一、创建mixins
在src目录下创建一个mixins文件夹，文件夹下新建一个TagHelper.ts文件（文件名随便）。mixins其实是一个js对象，应该以对象的形式来定义TagHelper，并在对象中我们可以和vue组件一样来定义重新代码段并通过export导出该对象

import Vue from 'vue'
import {Component} from 'vue-property-decorator'

@Component
export class TagHelper extends Vue{
  createTag(){    //这部分内容就是重复代码段
    ...
    }
    ...
}

二、使用mixins

<template>
 <div>
     /*这里用到了createTag方法实际是用mixins里面createTag函数*/
       <button class="createTag" @click="createTag">   
        新增标签</button>
 </div>
</template>

<script lang="ts">
import {Component} from 'vue-property-decorator';
import {mixins} from 'vue-class-component';  //引入mixins
import {TagHelper} from '@/mixins/TagHelper';  //引入mixins里面文件

@Component()
export default class Labels extends mixins(TagHelper){ 
  //这里用的不是Vue而是mixins(导入组件名)
}
</script>

注意几点：
1、需要从Vue导入mixins： import {mixins} from 'vue-class-component';
2、需要从minxin文件导入组件路径： import {TagHelper} from '@/mixins/TagHelper';
3、正常写Vue组件导出是export default class Labels extends Vue{ }，使用到mixins组件这里改成export default class Labels extends mixins(TagHelper){ }