Element组件引发的Vue中mixins使用，写出高复用组件

AlphaGooo 发布于2019-08-23 15:22 / 1818人阅读

摘要：我们就来说说如何创建一个灵活的高复用的组件。在一款优秀的组件库中有这么两个组件与。什么是官方说法混入是一种分发组件中可复用功能的非常灵活的方式。对象可以包含实例中的所有选项，当组件使用对象时，对象中的所有选项将和组件中的选项进行合并。

我们都知道 Vue 采用的是一种组件化开发模式，组件在 Vue 中一个非常重要的核心概念。每个组件都是一个完整的实例，组件的创建，组件间的通讯，组件如何更好的复用，以及整个的生命周期的钩子。所以你会发现它都是围绕组件展开的。

我们就来说说如何创建一个灵活的高复用的组件。之前分享过一篇「slot」内容分发的文章，它可以让我们组件的内容更加的灵活。有兴趣的可以看下。

《Vue一个案例引发「内容分发slot」的最全总结.md》

今天主要分享的是组件中另一种分发，功能的分发「mixins」，也叫混入。在开始之前呢，我们先看个案例，先从案例中看出个大概，然后带着问题去学习知识点会更加的高效，这也是我个人比较常用的学习方式。

在 Element（一款优秀的组件库）中有这么两个组件MessageBox 与 Dialog。

官方说法：

从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。

所以你会发现，这两个组件非常的相似，他们共享一些相同的基本功能，如：打开/关闭之间的状态切换。但用法上又各有不同。请看下面的例子

// Message Box



// Dialog
打开 Dialog

  这是一段信息

相似的组件，相同基本功能，这时你不得不做出选择，是将它们分成两个不同的组件？还是只保留一个？

显然这两种做法都不完美，如果分成两个组件，后期有功能的变动话，就会去修改多次，带来维护成本。如果保留一个，但是用法上又各有不同，这可怎么办呢？

有同学也会有疑问，不就两个组件吗？能带来多少维护成本？其实不仅如此，类似于这种状态切换的功能还有提示框，弹出框等等。

所以 Vue 给我们提供了一种方案叫功能的分发「mixins」。

什么是 Mixins

官方说法：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。

简单来说就是可以让不同的组件「共用」某个功能。

Mixins 对象可以包含 Vue 实例中的所有选项，当组件使用 Mixins 对象时，Mixins 对象中的所有选项将和组件中的选项进行合并。

既然如此那我们就来尝试用 Mixins 对象去修改上面两个组件。让它们可以共用一个方法。以下组件都是自己书写的简单实现，只实现状态切换的基本功能。

//mixins.js
export const showMixin = {
  data: function () {
    return {
      isShowing: true
    };
  },
  methods: {
    toggle() {
      this.isShowing = !this.isShowing;
    }
  }
}

//MessageBox

可以看到，我们把两个组件的相同功能给剥离出来，采用 mixins 对象的方式然后在组件中引入即可，这样以来组件就会有更好的灵活性。

有聪明的小伙伴应该就会有疑问了，如果 mixins 对象中的选项和组件实例中的选项相同时会怎么办？这也是我们下面要说到的问题，Vue 中给出了我们几个决策机制，一起来看看。

选项的合并

data 对象的合并

当组件与混入对象的 data 对象发生冲突时，以组件中的优先，如何没有冲突将会进行递归合并。

const mixin = {
  data: function() {
    return {
      hero: "蛮三刀",
      text: "来自mixins中的「上单一霸」"
    };
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  data() {
    return {
      text: "来自组件中的「上单一霸」"
    };
  },
  mounted() {
    console.log(this.$data); 
    // {hero: "蛮三刀",text: "来自组件中的「上单一霸」"}
  }
};

钩子函数的合并

钩子函数将会被全部调用，因为同名钩子函数将会被合并成一个数组，但 mixins 中的钩子会优先于组件中的钩子执行。

const mixin = {
  created() {
    console.log("mixins中的上单一霸");
  },
  mounted() {
    console.log("mixins中的中单一霸");
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  created() {
    console.log("组件中的上单一霸");
  },
  mounted() {
    console.log("组件中的中单一霸");
  }
};
//mixins中的上单一霸
//组件中的上单一霸
//mixins中的中单一霸
//组件中的中单一霸

3.值为对象类型的合并

像methods、watch等值为对象类型的会合并成一个对象，如有冲突将采用组件中的。

const mixin = {
  methods: {
    say() {
      console.log("mixins组件上单一霸");
    },
    do() {
      console.log("mixins偷塔");
    }
  }
};
export default {
  name: "DialogBox",
  mixins: [mixin],
  methods: {
    say() {
      console.log("组件上单一霸");
    }
  },
  mounted() {
    this.say(); //组件上单一霸
    this.do(); //mixins偷塔
  }
};

通过上面一些案例的解释，你应该熟悉了如何利用混入对象去创建一个高复用组件了，不妨去尝试一下。

最后，希望大家能够有所收获。如果你觉得本文不错欢迎点赞转发。

关注微信公众号：六小登登，学习更多干货文章，领取全套学习资源。

云服务器 GPU云服务器 element-ui dialog组件在php中使用组件 vue组件 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101940.html

vue之插件编写

摘要：插件分类插件通常会为添加全局功能，插件的编写方法一般分为类，如上图所示的插件应当有一个公开方法。前言前段时间看到黄轶老师的一篇文章感触颇多。特别是下面这一段话插件 Vue 化引发的一些思考这篇文章我不仅仅是要教会大家封装一个 scroll 组件，还想传递一些把第三方插件（原生 JS 实现）Vue 化的思考过程。很多学习 Vue.js 的同学可能还停留在 XX 效果如何用 Vue....

xuexiangjys 2019-08-21 17:04 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
vue 项目总结一组件开发的配置和例子

摘要：入口文件，影响全局，作用是引入全局使用的库公共的样式和方法设置路由等。项目里总会有一些复用的组件，例如弹出框发送手机验证码图片上传等，将它们作为通用组件，避免重复工作结构如下可以根据功能模块建立文件夹，放置本功能会用到的通用组件。上一篇文章 https://segmentfault.com/a/11... 介绍了项目里文件夹的分类和作用，这次主要说明 src 文件夹里具体的文件分类和...

melody_lql 2019-08-02 16:00 评论0 收藏0