vue 配置属性mixin混入

要点：

 

先一个小案例

实现两个子组件,分别点击对应按钮进行学生或者学校名字的弹窗

 

这边发现再写这两组件的时候绿色框的,和粉色框的代码一致,那么我们就可以把这个代码存入红色框的位置,然后之后要用到相同代码就进行了调用红色框的内容，这个就是混入mixin

创建mixin.js文件  并写入

要调用则要进行暴露

默认暴露                                                                        分别暴露

然后进行引用，我们这边用的是分别暴露,所以引用要加{}

 

 

 这边进行了改名 把mixin改为了hunhe,为了看起来更好理解而已

加一个配置对象 mixins:[] 里面就写,mixin 不要以为就调用了一个,就不需要[] 这边无论一个还是多个mixin都需要加[]

弹窗正常！！

 

 

 而且这mixin.js

里面钩子也能写

就输出了两遍,因为就相当于给两个组件都写了一个mounted方法

 

 

 所以其实mixin混入就是复用配置

然后再在mixin.js里写 一个配置data的

 

分别引用上,并在mixin上也加上

也就是混入,就像混合一个把两个东西加起来(不是替换) 

 

 

但是如果组件的data上已经配置了x的话,

组件

mixin.js

 

 运行发现为666

也就是说,以原组件配置好的为主,当原组件里面已经有了的配置,就mixin里就不生效了

但是有特殊情况

在School.vue上,写一个mounted钩子

 在mixin.js上也有,并且也引用了

 

 data里的数据、methods里的方法冲突都以School.vue里的为主

但是生命周期钩子,不以谁为主，它都要

并且mixin写的mounted在前,而组件里写的mounted在后

然后我们这边用到的都是局部的混入

每个组件都需要加上引用,并在mixins里写入混入

 全局混入：

在main.js里配置：

并且配置完毕后在所有的vue component和vm上都会有配置的东西

发现输出了四遍,因为有三个vue component 一个vm 并且它们都有挂载

 

 

 

 

 

总结：