在uniapp中使用混入

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

1.创建Mixins

在src目录中创建一个mixins文件，文件夹里面创建一个js文件import，前面我们说了mixins是一个js对象，所以应该以对象的形式来定义，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象

 

import { mapGetters } from 'vuex'

export default {  //导出去
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  data() {
    return {
      importVisible: false,
      importAction: '',
      importHeaders: {},
      importList: [],
      extraImport: {},
      importLoading: false
    }
  },
  methods: {
    handleSubmitImport() {//vue文件中想导入的方法
      this.importLoading = true
      this.$refs.importUpload.submit()
    },
    handleImport() {
      this.importHeaders.authorization = 'Bearer ' + this.token

      this.importVisible = true

      this.extraImport.fields = JSON.stringify(this.getImportFields())
      this.extraImport.model = this.getParent.table.usedModel

      if (this.getParent.beforeImport !== undefined) {
        this.getParent.beforeImport()
      }

      // 切换 action
      if (this.getParent.table.usedModel !== undefined) {
        this.importAction = process.env.VUE_APP_BASE_API + '/excel/import'
      } else {
        this.importAction = process.env.VUE_APP_BASE_API + this.getParent.table.importRoute;
      }
    },
    importSuccess(response, file, fileList) {
      this.importLoading = false
      this.importVisible = false
      this.importList = []
      if (response.code === 10000) {
        this.$emit('ok')
        this.$message.success('导入成功')
      } else {
        this.$message.error(response.message)
      }
    }
  }
}

 

2.如何使用写好的mixins

在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。
你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。写好的mixins怎么使用呢

1.Import.vue组件用mixins把import.js内容混入当前组件

<template>
  <el-dialog
    title="导入"
    :visible.sync="importVisible"
    width="30%"
    class="_import_"
  >
    <el-alert
      title="请按照模版要求填写对应数据"
      type="warning"/>
    <el-divider/>
    <el-button size="small" type="danger" @click="exportExcelTemplate" class="fr">下载导出模版</el-button>
    <el-divider/>
    <el-upload
      ref="importUpload"
      :action="importAction"
      :show-file-list="true"
      :multiple="false"
      :limit="1"
      :data="extraImport"
      :file-list="importList"
      :headers="importHeaders"
      :auto-upload="false"
      :on-success="importSuccess"
      v-loading="importLoading"
    >
      <div>
        <el-button slot="trigger" size="small" type="primary" >选取导入文件</el-button>
      </div>
    </el-upload>
    <el-button size="small" type="success" class="fr" @click="handleSubmitImport">导入</el-button>
  </el-dialog>
</template>

<script>
import _import from './mixin/import'

export default {
  name: 'ImportExcel',
  mixins: [_import],
  computed: {
    getParent() {
      return this.$parent.getParent
    }
  }
}
</script>

<style scoped>

</style>

 3.扩展

混入的对象中的msg属性，和组件的msg属性冲突，以组件的值优先。

同名钩子函数将会合并成一个数组，都会调用，混入函数先调用

值为对象的选项，如methods，components，directives等，将会合并为一个新对象，如果键名冲突，组件的值优先

4.与vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

5.与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。