vue中mixins的使用方法

151 阅读1分钟

mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当我们的项目越来越大时,你就会发现组件中有很多相似的功能(data,method,watch、mounted等),不仅提高了代码的维护难度还造成了造成不必要的计算消耗,针对这种情况官方提供了Mixins特性。

什么时候需要用mixins?

在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件。mixins是一个js对象,所以应该以对象的形式来定义myMixins,在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性,并通过export导出该对象。如图:

image.png

怎么使用mixins

在需要调用的组件中引入myMixins.js文件,然后在export default 中引入你需要的对象即可:

image.png

mixins的特点

1.方法和参数在各组件中不共享

2 引入mixins后,组件会对其进行合并,将mixins中的数据和方法拓展到当前组件中来,如果当前组件也有同名称的属性或者方法,在合并的过程中会出现冲突,接下来我们详细了解Mixins合并冲突

与vuex的区别

vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。

Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。