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

版权声明:本文为simonalwayson原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/simonalwayson/p/12924400.html