在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 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
BootStrap的两种模态框方式
May 10 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
js实现随机8位验证码
Jul 24 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
JavaScript随机数的组合问题案例分析
May 16 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缓存设计实现代码
2011/09/30 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
对标管理实施方案
2014/03/12 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js