Vue中的mixin(混入)

目录

总结

注意点1:如果原组件中有  相同key值对应的数据，以原组件中的数据为主。如果原组件中没有相同key值对应的数据，就混合进去。

注意点2：如果组件data中的数据或者methods中的方法和mixin.js中导入的数据 key值冲突，以 组件中的为主。但是如果是生命周期钩子，不以任何人为主，都要。

 全局混合

---

总结

mixin(混入)

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

使用方式：

        第一步定义混合，例如：

                {

                        data(){....},

                        methods:{....}

                        ....

                }

        第二步使用混入，例如：

                （1）全局混入:Vue.mixin(xxx)

                  (2)   局部混入:mixins:['xxx']

备注：

1.混入(混合)：两个组件，共享一个配置，且这个配置要一样才能共享

2.如果原组件中有  相同key值对应的数据，以原组件中的数据为主，就不混合。如果原组件中没有相同key值对应的数据，就混合进去。

两个组件，共享一个配置，且这个配置要一样才能共享。将原组件中相同的配置项抽离出来放到mixin.js文件夹中，再分别在需要的文件夹中引入。

 在 mixin.js文件中：

 在需要引入混合配置项的组件中这样操作：

注意： 配置项mixins的值必须写在一个数组里面。

 

注意点1:如果原组件中有  相同key值对应的数据，以原组件中的数据为主。如果原组件中没有相同key值对应的数据，就混合进去。

原组件中x的值为666：

mixin.js中：x的值为100

 

 混入结果：以原组件中相同key值数据为主。

注意点2：如果组件data中的数据或者methods中的方法和mixin.js中导入的数据 key值冲突，以 组件中的为主。但是如果是生命周期钩子，不以任何人为主，都要。

 

结果：

 

 mixin.js和组件中的mounted中的console.log都执行了。所以 生命周期钩子，不以任何人为主，都要

 全局混合

前面的都是局部混合

全局混合：

 这样全局混合的话，所有的VC和VM都会得到 hunhe,hunhe2 混入的数据。