前言
如果你使用过sass,那你对Mixin应该有过了解。Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用场景
在vue中可能存在两个非常相似的组件,它们的组件选项大同小异,这时候就可以用到Mixins,避免重复书写两次同样的内容。
场景一
model和confirm组件,虽然这两个组件的html结构不一样,但是组件选项中的一些方法是相同的,比如隐藏/显示。-
场景二
tabs组件的内容区域,在一些需求场景中,标题一和标题二对应的内容区域中,有一部分html结构可能是完全相同的,只是请求数据的参数不同。此时我们可以将公共部分封装成组件,但是仅此还不够,我们封装的组件只是用来渲染数据的,也就是说,标题一和标题二对应的内容区域的组件仍然是两个。
当然也可以写成一个,但是需要根据tab标题的变化传递不同的参数,当参数比较多就不容易维护了。
所以这里使用Mixins封装通用的组件选项,这样在不同的内容组件中,分别引用公共组件和Mixins,即方便维护,又有区分度。
场景三
需求上有通用部分,比如增删改查,在不同组件中有不同的url和参数,但是逻辑是相同的,这样也可以使用Mixins封装通用部分。
语法
混合还提供了选项合并,全局混合等功能,具体可查阅官方文档