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 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
ExtJS 入门
Oct 29 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
uni-app之APP和小程序微信授权方法
May 09 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程序员编程注意事项
2008/04/10 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
JS的get和set使用示例
2014/02/20 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
django下创建多个app并设置urls方法
2020/08/02 Python
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
销售简历自我评价
2014/01/24 职场文书
运动会广播稿50字
2014/01/26 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
事业单位考察材料范文
2014/12/25 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书