在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添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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 创建标签云函数代码
2010/05/26 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
专升本自我鉴定
2013/10/10 职场文书
经贸日语毕业生自荐信
2013/11/03 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
2014年医务科工作总结
2014/12/18 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
css3 文字断裂效果
2022/04/22 HTML / CSS
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers