Mixins (混合或混入)——定义的是一个对象

1.概念:一种分发Vue组件可复用功能的非常灵活的方式。混入对象可以包含任意组件选项(组件选项:data、watch、computed、methods、created、mounted…)。当组件使用混入对象时,组件和混入对象的同名选项将以恰当的方式进行“合并”。

2.用法

  1)定义一个混入对象mixin(创建一个mixin.js文件)

  

2)把混入对象mixin混入当前组件中

   

3.合并规则

1)data:数据在内部会进行递归合并,并在发生冲突时以组件数据优先(组件和混入对象的数据同一个参数名初始值不同,取组件的值)

2)created、mounted等:同名钩子函数将合并为一个数组,都将被调用且混入对象的钩子将在组件自身钩子之前调用

3)watch、computed、methods等:值为对象的选项,将被合并为同一个对象,两个对象键名冲突时会覆盖混入对象中的方法

4.特点

1)与vuex的区别

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

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

2)与公共组件的区别

    公共组件:在父组件中引入组件,相当于在父组件中给出一篇独立的空间供子组件使用,然后根据props来传值,但本质上两者时相对独立的

    Mixins:在引入混入对象之后,混入对象与组件中的同名选项进行合并,相当于扩展了父组件,可以理解为形成了一个新的组件

5.注意

当混入对象methods选项里面包含异步请求函数,而我们又需要再组件中使用异步请求函数的返回值,会出现取不到此返回值的情况

  Mixin中

    

  组件中

    

    此时会打印undefined

解决方案:不要返回结果而是直接返回异步函数

  Mixin中

    

  组件中

    

参考文章地址:1.https://www.cnblogs.com/Ivy-s/p/9937173.html

        2.https://cn.vuejs.org/v2/guide/mixins.html

vue中使用mixins的更多相关文章

  1. Vue中的“混合”——mixins使用方法

    混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项.当组件和混合对象含有同名选项时,这些选项将以恰当的方式混 ...

  2. Vue中Mixins使用

    mixins是一种分发Vue组件中可复用功能的一种灵活方式. mixins是一个JavaScript对象,可以包含组件中的任意选项,比如Vue实例中生命周期的各个钩子函数,也可以是data.compo ...

  3. vue中extend/component/mixins/extends的区别

    vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸

  4. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  5. vue中mixins的使用方法和注意点(详)

    mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...

  6. Vue中mixins、extends、extend和components的作用和区别

    关于mixins:官方文档: https://cn.vuejs.org/v2/guide/mixins.html 一.components Vue.component是用来注册或获取全局组件的方法,其 ...

  7. vue中mixin的一点理解

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别?     ...

  8. 如何在Vue中建立全局引用或者全局命令

    1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...

  9. 小技巧|使用Vue.js的Mixins复用你的代码

    Vue中的混入 mixins 是一种提供分发 Vue 组件中可复用功能的非常灵活的方式.听说在3.0版本中可能会用Hooks的形式实现,但这并不妨碍它的强大. 这里主要来讨论 mixins 如何优化我 ...

随机推荐

  1. Git基本操作和使用

    基本命令: git config git init git clone git remote git fetch git commit git rebase git push 本地基本操作: git ...

  2. [Qt]执行cmd命令

    要加 /c 参数 QProcess p; p.start("cmd", QStringList()<<"/c"<<"ping ...

  3. opencv-6-图像绘制与opencv Line 函数剖析

    opencv-6-图像绘制与opencv Line 函数剖析 opencvc++qt 开始之前 越到后面, 写的越慢, 之前还抽空去看了下 学堂在线那篇文章提供的方法, 博客第一个人评论的我, 想想还 ...

  4. Scala教程之:函数式的Scala

    文章目录 高阶函数 强制转换方法为函数 方法嵌套 多参数列表 样例类 比较 拷贝 模式匹配 密封类 单例对象 伴生对象 正则表达式模式 For表达式 Scala是一门函数式语言,接下来我们会讲一下几个 ...

  5. numpy库的学习笔记

    一.ndarray 1.numpy 库处理的最基础数据类型是由同种元素构成的多维数组(ndarray),简称“数组”. 2.ndarray是一个多维数组的对象,ndarray数组一般要求所有元素类型相 ...

  6. mybatis源码学习(一):Mapper的绑定

    在mybatis中,我们可以像下面这样通过声明对应的接口来绑定XML中的mapper,这样可以让我们尽早的发现XML的错误. 定义XML: <?xml version="1.0&quo ...

  7. VMware虚拟机中centos6.5网络配置(桥接方式)与宿主机之间通信

    1.修改网络适配器 2.选择桥接所用的网卡 3.设置网络 3.1在系统终端中输入 setup ,进行图形网络配置(此命令只有redhat系列才有作用) 上下左右键选择,enter键确定 将光标移动到U ...

  8. CultureInfo 类中需要的【区域性名称】查询

    2019独角兽企业重金招聘Python工程师标准>>> 提供有关特定区域性的信息(对于非托管代码开发,则称为"区域设置"). 这些信息包括区域性的名称.书写系统. ...

  9. 虚拟化学习笔记-KVM虚拟化跨机迁移原理

    参考:https://zhuanlan.zhihu.com/p/27055555 在线迁移过程划分为三个阶段:准备阶段.迁移阶段和切换阶段.迁移环境为虚拟化底层KVM+Qemu.虚拟化管理Libvir ...

  10. 12c DG broker DMON自动重启过程分析

    一.知识点 1.强烈建议大家管理dataguard使用broker. 2.broker的日志要知道在哪里,会看日志是学习的第一步. 3.体系结构需要看官方文档. 二.测试过程 1.查看DMON进程 & ...