在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 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python实现的多进程和多线程功能示例
2018/05/29 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python识别验证码的思路及解决方案
2020/09/13 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
个人找工作求职简历的自我评价
2013/10/20 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
党小组推荐意见
2015/06/02 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL