Vue.js中使用Mixins的方法详解

更新时间：2020-06-03 17:26:00
编辑：冀曼卉

一个很常见的场景: 有两个非常相似的组件, 它们拥有非常相似的基本功能, 但是它们之间又有足够的不同的地方, 该如何选择呢? 我们是应该将它们分成两个完全不同的组件呢? 还是创建一个基础组件, 然后定义足够多的props以方便区分使用场景?

这两种方式都不是完美的: 如果你将它们分成两个完全不同的组件, 在需求变化(功能变化)时, 可能会增加需要同时修改两个组件的风险, 这违反了”DRY”的前提. 另一方面, 太多的props很快会让人变得凌乱, 并且, 迫使维护人员, 甚至是你自己, 要首先理解这些props的上下文才能使用它, 这会让人非常失望.

Vue的Mixins是非常实用的编程方式, 因为最终实用的编程是通过不断减少运动部件(moving parts)使代码变得容易理解. (关于这一点, Michael Feathers有一个很好的引用). 一个mixin允许你封装一个功能, 以便你能在整个应用程序中的不同组件中使用它. 如果mixin被正确的创建, 它们是纯粹的–它们不会修改或更改函数的作用范围(scope)之外的内容, 因此, 您可以在多个地方执行它们, 并且只要输入值相同, 总是能非常可靠得得到相同的结果. 这真的非常强大.

认识Mixins

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

栗子

假设我们有一些不同的组件, 它们的工作是切换状态boolean, 一个模态(modal)和一个提示(tooltip). 这些tooltips和modals没有很多共同之处, 除了这个功能: 它们看起来不一样, 它们使用起来也不尽相同, 但是它们的逻辑是相似的 .

//modal
const Modal = {
 template: '#modal',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
//tooltip
const Tooltip = {
 template: '#tooltip',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

我们可以从中提取逻辑, 并创建可以复用的部分：

const toggle = {
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
const Modal = {
 template: '#modal',
 mixins: [toggle]
};
 
const Tooltip = {
 template: '#tooltip',
 mixins: [toggle]
};

duang — 一个小而简单的:chestnut:让我们知道了Mixins对于封装一些可复用的功能如此有趣、方便、实用。

demo地址：https://github.com/hzzly/xyy-vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。

相关教程

在小程序中实现Mixins方案

这篇文章主要给大家介绍了关于如何在微信小程序中实现Mixins方案的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面

发布时间：2020-02-29
Vue.js快速入门

目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。全书分为8章，内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等，最后还给出一个实战案例供读者了解Vue.js项目开发过程。本书适合Vue.js初学者、Web前端开发人员，也适合高等院校和培训学校的师生教学参考。

大小：26581 MB MVue.js入门
Spring Boot+Vue全栈开发实战

传统的JavaEE开发效率低下、配置臃肿、调试不便，严重制约了程序员的生产力。Spring Boot致力于简化开发配置，并为企业级开发提供一系列非业务性功能；而Vue则采用数据驱动视图的方式将程序

大小：196.3 MBSpring电子书
Vue.js实战

尤雨溪推荐随书附赠示例代码下载资源 vue社区iView组件贡献者前端大神梁灏编写突出实战应用为王大鹏展趐鹰击长空 Vue.js实战助你攀上前端之巅

大小：196.7 MBVue电子书
Vue2实践揭秘

Vue2实践揭秘以Vue2的实践应用为根基，从实际示例入手，详细讲解Vue2的基础理论应用及高级组件开发，通过简明易懂的实例代码，生动地让读者快速、全方位地掌握Vue2的各种入门技巧以及一些

大小：204.6 MBVue2电子书
Vue.js快速入门

目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。

大小：186.6 MBWeb前端电子书
前端工程师必备技能：Vue移动开发实战技巧

Vue.js是一个渐进式的JavaScript 框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。作为201

大小：122 MBVue实战电子书
Vue.js项目实战

Vue实用、灵便、更快，为搭建详细的当代Web运用出示了需要的全部作用，其渐进式的特性也让开发人员可以轻轻松松入门，发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

大小：141 MBVue
Node.js实战：使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用

大小：227 MBNode.js电子书
Vue.js项目开发实战

大小：186.6 MBVue.js电子书
JavaScript+Vue+React全程实例

这书根据基础知识与开发实践活动紧密结合的观念，选萃当今简易、好用和时兴的百余个JavaScript编码案例，协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂，包含了JavaScript前端开发开发的各个方面。

大小：59150 MB MJS实例