四、mixins 特点
- 方法和参数在各组件中不共享;
如混入对象中有一个cont:1
的变量,在组件A中改变cont
值为5,这时候在组件B中获取这个值,拿到的还是1,还是混入对象里的初始值,数据不共享。示例如下:
4.1 值为参数的选项
混合对象中的参数num
组件1中的参数num进行+1的操作。
组件2中的参数num未进行操作。
查看两组件中分别输出的num值。
可以看到,在组件1里改变了num里面的值,组件2中的num值还是混入对象里的初始值。
4.2 值为对象的选项
如methods
,components
等,选项会被合并,键冲突的组件会覆盖混入对象的方法。比如混入对象里有个方法A,组件里也有方法A,这时候在组件里调用的话,执行的是组件里的A方法。
混入对象中的方法:
组件中的方法:
打印台的输出
4.3 值为函数的选项
如created
,mounted
等,就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用,同一个钩子函数里,会先执行混入对象的东西,再执行本组件的。
混入对象函数中的console
:
组件函数中的console
:
打印台打印:
五、与 vuex 的区别
vuex
:用来做状态管理,可以看做全局变量,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。mixins
:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
六、与公共组件的区别
- 组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据
props
来传值,但本质上两者是相对独立的:父组件 + 子组件 -> 父组件 + 子组件
。mixins
:是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件:父组件 + 子组件 -> new父组件
,有点像注册了一个vue
的公共方法,可以绑定在多个组件或者多个Vue
对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者Vue
实例对象中,仍然可以定义相同函数名的方法进行覆盖,有点像子类和父类的感觉。
七、mixins 异步请求处理
在mixins
里面包含异步请求函数的时候,需要在组件中使用异步请求函数返回值的应用场景下,直接应用混入参数时会取不到此返回值,示例如下:
mixin
中:
组件中:
控制台:
解决方案:不要直接应用返回结果,而是通过直接调用异步函数解决。
mixin
中:
组件中:
控制台