Vue- mixin(混入)

mixin(混入)

mixin：翻译过来叫混入，也有人叫混合，官方叫混入

作用：两个组件共享一个配置(配置必须是一样的)，本质就是复用配置

通过案例理解学习如何使用以及作用

1 编写案例

提出需求，新增一个组件，当点击学生姓名的时候，弹窗展示学生的姓名，当点击学校姓名的时候，弹窗展示学校的姓名

虽然实现了效果，但是不够好

这些代码都是一样的，如果能进行封装下复用就更好了，这时候就可以借助mixin进行混入了

2 创建mixin文件

创建mixin.js文件,写成一个对象进行用常量接收并且暴露

3 引用混入

创建好并写好对应的代码后，就可以在需要用的组件里面进行引入了

4 配合混入

引入完之后，需要加入一个全新的配置项：mixins,它的值是一个数组，和props有点像

测试一下

5 mixin里面都可以写什么？

只要是组件中能写的属性，mixin都可以写，比如这里我写了一个挂载函数

两个组件当然就是输出两次了

再比如我在混合中定义一个data，里面分别有x,y

分别引入并使用

发现组件中也有混合中的x和y了

6 混入和组件优先级

刚才在混入里面定义了x，如果在组件中也有一个x，那么谁的优先级更高呢

通过测试发现是组件的优先级大于混合

7 一个坑

上面刚验证过，优先级是组件大于混入，准确来说，如果data中的数据，methods中的方法发生冲突确实是组件的优先级大于混入的，但是如果是一些生命周期钩子函数，就会以混入的优先级大于组件的优先级，并且都会保留

8 全局混入

刚才举例的都是局部混入，如果想实现全局混入，可以这么做

在main.js里面引入混入并使用，因为main.js是程序的入口

这样写就会在全部的vm和vc里面加入混入，可能会导致性能降低，根据自需求和场景酌情使用即可

9 总结

mixin(混入)

功能：可以把多个组件共用的配置提取成一个混入对象

• 使用方式：
• 1 定义混入 例如：{data(){}}
• 2 使用混入 例如：(1)全局混合 Vue.mixin(xxx) (2)mixins:[‘xxx’]