vue mixins组件复用的几种方式(小结)


Posted in Javascript onSeptember 06, 2017

最近在做项目的时候,研究了mixins,此功能有妙处。用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似。我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢?

不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦;第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰;有没有好的方法,有那就是用vue的混合插件mixins。混合在Vue是为了提出相似的数据和功能,使代码易懂,简单、清晰。

1.场景

假设我们有几个不同的组件,它们的工作是切换状态布尔、模态和工具提示。这些提示和情态动词不有很多共同点,除了功能:他们看起来不一样,他们不习惯相同,但逻辑是相同的。

//弹框
const Modal = {
 template: '#modal',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 },
 components: {
  appChild: Child
 }
}

//提示框
const Tooltip = {
 template: '#tooltip',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 },
 components: {
  appChild: Child
 }
}

上面是一个弹框和提示框,如果考虑做2个组件,或者一个兼容另一个都不是合理方式。请看一下代码

const toggle = {
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

const Modal = {
 template: '#modal',
 mixins: [toggle],
 components: {
  appChild: Child
 }
};

const Tooltip = {
 template: '#tooltip',
 mixins: [toggle],
 components: {
  appChild: Child
 }
};

用mixins引入toggle功能相似的js文件,进行混合使用

2.可以合并生命周期

//mixin
const hi = {
 mounted() {
  console.log('this mixin!')
 }
}

//vue组件
new Vue({
 el: '#app',
 mixins: [hi],
 mounted() {
  console.log('this Vue instance!')
 }
});

//Output in console
> this mixin!
> this Vue instance!

先输出的是mixins的数据

3、可以全局混合(类似已filter)

Vue.mixin({
 mounted() {
  console.log('hello from mixin!')
 },
 method:{
   test:function(){
   }
  }
})

new Vue({
 el: '#app',
 mounted() {
  console.log('this Vue instance!')
 }
})

会在每一个组件中答应周期中的log,同时里面的方法,类似于vue的prototype添加实例方法一样。

var install = function (Vue, options) {
 // 1. 添加全局方法或属性
 Vue.myGlobalMethod = function () {
  // 逻辑...
 }
 // 2. 添加全局资源
 Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
   // 逻辑...
  }
  ...
 })
 // 3. 注入组件
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
  ...
 })
 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (options) {
  // 逻辑...
 }
}

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

Javascript 相关文章推荐
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
js数组去重的方法汇总
Jul 29 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 #Javascript
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
Vue的百度地图插件尝试使用
Sep 06 #Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 #Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 #Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
详谈js原型继承的一些问题
Sep 06 #Javascript
You might like
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python做接口测试的必要性
2019/11/20 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python socket服务常用操作代码实例
2020/06/22 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
安全生产大检查方案
2014/05/07 职场文书
产品推广策划方案
2014/05/10 职场文书
电子商务专业求职信
2014/07/10 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
职称评定个人总结
2015/03/05 职场文书
辞职离别感言
2015/08/04 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL