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 的值一样的,就可以覆盖了!!!!

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。