Vue混入

83 阅读1分钟

混入(混合)

混入 (mixin)是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象(mixins)是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、methods 、computed、watch等等。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

例子

如下图,有两个组件,但是这两个组价用到的方法都是相同的,但是却写了两次,这时候就可以考虑使用混入实现代码的复用。 image.png

使用的时候只需要创建一个js文件,里面可以导出多个对象,每个对象都可以写data,methods等方法,然后再需要用到这些方法的地方引入,通过mixins: [xxx]的方式进行应用就可以了。 注意:mixin是会和当前组件的对象进行合并的,如果有重复,组件内部定义的值会覆盖混入的值,一些方法比如生命周期钩子不会被覆盖,都会执行(先执行混入的,在执行组件内部定义的) image.png

全局混入,需要在main.js中进行引入应用,这样所有的组件都会受到影响包括第三方组件(不建议使用)

image.png

小结

组件使用mixins中的属性或者方法,当改变mixins的属性值或者是方法内部的一些逻辑操作时,只会在当前组件中起作用而并不会改变混入对象的属性值或者是方法,所以其他组件引入mixins并使用其属性或者是方法时是不会受当前组件操作影响的。