vue mixins 使用的小记

说明：

在使用使用vue 开发后台的系统的时候，看到别人使用了关于mixins 的使用，对此是一知半解（非专业前端的悲哀）。百度一番之后：
mixins的意思是混入：是一种分发 Vue 组件中可复用功能的非常灵活的方式。
这个混入对象可以包含任意组件选项，包括属性，方法，等···
党我们的在当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

遇到问题：

对mixins 的定义的方式，因为为了想定义传参，给mixins 混入的初始化对象的时候，有相关的参数的传递。

由于 mixins 的created方法的调用，在混入的组件的created方法调用前面，当我想初始化定义mixins里配置一些参数的时候就没办法了！

第1种定义方式：

对于定义mixins 百度一份有人是这样定义可以传参的：
一下文字来自：
————————————————
版权声明：本文为CSDN博主「前端开发终生学习者」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ltf_1225/java/article/details/94628001

mixin.js

export default function(config) {
    let {
        listUrl="",
        exportUrl=""
    } = config;
    return {
        created() {
            console.log(listUrl);
            console.log(exportUrl);
        }
    }
}

xxx.vue

import Mixin from './mixin';
let mixin = new Mixin({
    listUrl: "www.baidu.com",
    exportUrl: "www.yahu.com"
})
 
export default{
    mixins:[mixin],
}

第2种定义方式：

image.png

对于：

// 创建一个需要混入的对象
export const mixinHello = {
 data(){
    return {
      is_loaddata:true,
    }
  },
    created() {  
      # 想在这里动态的根据is_loaddata来处理相关的操作！
       if(this.is_loaddata:true){
          this.hello();
        }
      
    },
    methods: {
        hello() {
            console.log('Hello');
        }
    }
};

假如我想在这里动态的根据is_loaddata来处理相关的操作！就需要再

import {myMixin} from './../assets/js/mixin';
export default {
    mixins:[myMixin],
    name: 'test',
    data () {
        return {
            msg: 'Welcome to Your project'
        }
    }
}

进行关于mixinHello 的is_loaddata的值的设置操作！

这其实没必要进行传参什么的！！！直接的在引入的组件了定义一个is_loaddata和mixinHello 的值一样的，就可以覆盖了！！！！

傻叉的我的！小记！一下！