vue 2.0 混合的思考

前言

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

使用场景

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

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

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

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

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

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

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

语法

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

参考

在vue中使用Mixin

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,457评论 0 29
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,270评论 25 709
  • 基于类的视图 Django中的视图是一个可调用对象,它接收一个请求然后返回一个响应。这个可调用对象不仅仅限于函数,...
    兰山小亭阅读 10,035评论 1 13
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,200评论 4 61
  • 已经有很长一段时间不愿意写东西,只因为每次投入的写之后,情绪会有一个很大的起伏。 而最近刚刚恢复写东西的习惯,就看...
    小飞侠303阅读 2,910评论 0 2