Vue中Mixin的使用及注意事项

555 阅读2分钟

一、什么是Mixin?

官方解释:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

二、什么时候使用Mixin?

通俗来讲就是:mixin是一个对象,是我们写在vue页面script标签下的export default里面的内容。mixin就是把多个页面里可复用的功能给抽出来。比如A组件和B组件有相同的data,created,methods等,那就可以直接抽取出来形成公共的js,在使用的时候,vue会将这些js插入到页面中。这样我们可以少写很多重复代码。

三、如何使用Mixin?

在src下新建mixins文件夹,在文件夹下新建myMixin.js(文件名自己定),然后在counter页面引入

image.png

image.png

image.png 效果

test.gif

四、特点

  • 方法和参数在各组件中并不共享,虽然组件调用了mixins并合并到自身组件中来了,但是其属性只会被当前组件所识别,并不会被共享,也就是其他组件无法从当前组件中获取mixins中的数据和方法。
  • 引入mixins后,组件会将mixins中的数据和方法合并到当前组件中(也就是官方说的“混入”),既然是合并,那大概率会出现冲突。

五、Mixins合并冲突

  • 值为对象,混入组件时选项会被合并,键冲突时优先组件,组件中的键会覆盖混入对象的。
  • 值为函数,混入组件时选项会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用

注意:当mixins里包含异步请求函数,而我们又需要在组件中使用异步函数返回值的时候,我们会取不到这个返回值。 那这个时候我们就得直接返回异步函数而不是返回函数结果