vue 2.0 混合的思考

前言

如果你使用过sass，那你对Mixin应该有过了解。Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用场景

在vue中可能存在两个非常相似的组件，它们的组件选项大同小异，这时候就可以用到Mixins，避免重复书写两次同样的内容。

• 场景一
  model和confirm组件,虽然这两个组件的html结构不一样，但是组件选项中的一些方法是相同的，比如隐藏/显示。

• 场景二
  tabs组件的内容区域，在一些需求场景中，标题一和标题二对应的内容区域中，有一部分html结构可能是完全相同的，只是请求数据的参数不同。

  此时我们可以将公共部分封装成组件，但是仅此还不够，我们封装的组件只是用来渲染数据的，也就是说，标题一和标题二对应的内容区域的组件仍然是两个。

  当然也可以写成一个，但是需要根据tab标题的变化传递不同的参数，当参数比较多就不容易维护了。

  所以这里使用Mixins封装通用的组件选项，这样在不同的内容组件中，分别引用公共组件和Mixins，即方便维护，又有区分度。

• 场景三
  需求上有通用部分，比如增删改查，在不同组件中有不同的url和参数，但是逻辑是相同的，这样也可以使用Mixins封装通用部分。

语法

混合还提供了选项合并，全局混合等功能，具体可查阅官方文档

参考

在vue中使用Mixin