2021-10-31

2021SC@SDUSC

智能研究中心快递柜学习笔记5


项目越来越大，组件之间可能存在很多相似的功能，相同的代码段，如果每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，此时用mixins特性解决。在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们不会改变函数作用域外部。
混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

在需要调用的组件中引入myMixins.js文件，然后在export default 中引入需要的对象即可

<script>
import { myMixins }from "@/mixins/myMixins.js";export default {
mixins:[myMixins]}
</script>

1、创建混入对象：在src文件夹创建mixins文件夹

// 创建一个需要混入的对象 
export const mixinstest = {
    data(){
        return {
            testMix: '混入对象的data'
        }
    },
    created(){
        console.log('这是混入对象的created')
    },
    methods:{
        mixinsFun(){
            console.log('调用混入对象的methods的函数')
        }
    },
    computed:{
        testMix2(){
            return this.testMix+'：这是混入对象计算结果。'
        }
    },
    watch: {
        testMix(newVal,oldVal){
            console.log('混入对象的watch')
        }
    }
}

just like

import { formatDate } from '@/utils/util'
import Area from '@/components/_util/Area'

const onlUtil = {
  data(){
    return {
      mixin_pca:''
    }
  },
  created(){
    this.mixin_pca = new Area()
  },
  methods:{
    simpleDateFormat(millisecond, format){
      return formatDate(millisecond, format)
    },
    getPcaText(code){
      return this.mixin_pca.getText(code);
    },
    getPcaCode(text){
      return this.mixin_pca.getCode(text)
    }
  }
}

export  { onlUtil }

新增修改完成调用 modalFormOk方法 编辑弹框组件ref定义为modalForm
高级查询按钮调用 superQuery方法 高级查询组件ref定义为superQueryModal
data中url定义 list为查询列表 delete为删除单条记录 deleteBatch为批量删除

import { filterObj } from '@/utils/util';
import { deleteAction, getAction,downFile,getFileAccessHttpUrl } from '@/api/manage'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"

export const JeecgListMixin = {
  data(){
    return {
      //token header
      tokenHeader: {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)},
      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
      queryParam: {},
      /* 数据源 */
      dataSource:[],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      /* 排序参数 */
      isorter:{
        column: 'createTime',
        order: 'desc',
      },
      /* 筛选参数 */
      filters: {},
      /* table加载状态 */
      loading:false,
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      /* 查询折叠 */
      toggleSearchStatus:false,
      /* 高级查询条件生效状态 */
      superQueryFlag:false,
      /* 高级查询条件 */
      superQueryParams: '',
      /** 高级查询拼接方式 */
      superQueryMatchType: 'and',
    }
  },
  created() {
      if(!this.disableMixinCreated){
        console.log(' -- mixin created -- ')
        this.loadData();
        //初始化字典配置 在自己页面定义
        this.initDictConfig();
      }
  },
  methods:{
    loadData(arg) {
      if(!this.url.list){
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          console.log("--- data source ---");
          console.log(this.dataSource);
          this.ipagination.total = res.result.total;
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
……

2、在组件内引入并引用混入

<template>
    <div>
        <div>{{testMix}}</div>
        <div @click="mixinsFun">{{testMix}}</div>
        <input type="text" v-model="testMix">
        <div>{{testMix2}}</div>
    </div>
</template>
<script>
import {mixinstest} from '../../mixins/index' 
export default {
    mixins: [mixinstest],
    data (){
        return {
            testMix:'这是组件的数据'
        }
    },
    created(){
        console.log('这是组件的created')
    },
    methods: {
        mixinsFun(){
            console.log('调用组件的methods的函数')
        }
    },
    computed:{
        testMix2(){
            return this.testMix+':这是组件计算结果'
        }
    },
    watch: {
        testMix(newVal,oldVal){
            console.log('组件的watch')
        }
    }
}
</script>
<style>
</style>

1 当在组件中和混入中有相同的‘testMix’这个数据时，显示组件中’testMix’对应的数据，当只用混入中有’testMix‘函数时，显示混入中’testMix’对应的数据。
　2 在组件中和混入中有相同的函数mixinsFun()时，在组件中调用时，调用的是组件中的mixinsFun()函数，当只用混入中有mixinsFun()函数时，在组件中调用mixinsFun()是调用混入中的。
　3 在组件中和混入中有相同的computed函数testMix2()时，在组件中调用时，调用的是组件中的testMix2()函数，当只用混入中有computed函数testMix2()时，在组件中调用testMix2()是调用混入中的。
　4在组件中和混入中有相同的created()函数时，先执行混入中的created,再执行组件中的created。猜想其他生命周期也应该是一样。
　5在组件中和混入中有相同的watch()函数testMix时，先执行混入中watch的testMix,再执行组件中watch的testMix。

对比:
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。