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 混入的数据。

猜你喜欢

转载自blog.csdn.net/weixin_47075145/article/details/127255362