美文网首页
vue mixins 使用的小记

vue mixins 使用的小记

作者: 小钟钟同学 | 来源:发表于2020-06-08 10:32 被阅读0次

说明:

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

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

相关文章

  • vue mixins 使用的小记

    说明: 在使用使用vue 开发后台的系统的时候,看到别人使用了关于mixins 的使用,对此是一知半解(非专业前端...

  • vue2中的mixins

    mixins: 混合对象, 功能类似于Vue.extend(); 使用时,在组件的选项中添加mixins: [mi...

  • 16-Vue之混入mixin的使用

    Vue之混入mixins(非完整版) 一、mixins基础介绍(不使用cli版本) 1.首先我们看一下vue官网对...

  • Vue 之 Mixins (混入)

    Mixins Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。 什么时候使用Mixins 页面的...

  • Vue 混入(mixins和Vue.mixin)

    1.mixins和Vue.mixin mixins 混入 (mixins) 是一种分发 Vue 组件中可复用功能的...

  • vue mixins的使用

    mixins是一种将组件功能复用的方式,简单来说就是讲组件的数据、钩子、方法、等封装在一个对象里面,然后在组建中m...

  • vue + mixins 使用实例

    mixins可写入的模块 mixins可写入组件export default 中的所有内容。data , meth...

  • 给Vue扩展方法

    在Vue中我们有如下生命周期方法: 给vue增加一个扩展函数 Vue合并策略在Vue中使用mixins时会发现, ...

  • vue中mixins的使用

    组件内使用mixin 全局使用mixin(使用Vue.mixin()方法) 参考:https://www.jian...

  • mixins

    vue混入(mixins) 简介 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混...

网友评论

      本文标题:vue mixins 使用的小记

      本文链接:https://www.haomeiwen.com/subject/oobbzhtx.html