在Vue.js中使用Mixins的方法


Posted in Javascript onSeptember 12, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery select控件的相关操作实现代码
Sep 14 Javascript
Javascript玩转继承(一)
May 08 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
原生js实现随机点名
Jul 05 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
elementui的el-popover修改样式不生效的解决
Jun 30 Javascript
JavaScript面向对象精要(上部)
Sep 12 #Javascript
JS库之ParticlesJS使用简介
Sep 12 #Javascript
关于预加载InstantClick的问题解决方法
Sep 12 #Javascript
提升页面加载速度的插件InstantClick
Sep 12 #Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 #Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 #Javascript
VueJs组件prop验证简单介绍
Sep 12 #Javascript
You might like
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
自己的js工具 Event封装
2009/08/21 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
AngularJS快速入门
2015/04/02 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
js实现随机点名
2021/01/19 Javascript
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
上海微创软件面试题
2012/06/14 面试题
档案接收函范文
2014/01/10 职场文书
公立医院改革实施方案
2014/03/14 职场文书
幼儿学前班评语
2014/12/29 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang