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 相关文章推荐
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
jquery图形密码实现方法
Mar 11 Javascript
微信jssdk用法汇总
Jul 16 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
javascript中如何判断类型汇总
May 14 Javascript
过滤器vue.filters的使用方法实现
Sep 18 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
js弹出对话框方式小结
2015/11/17 Javascript
javascript模块化简单解析
2016/04/07 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
解决Python传递中文参数的问题
2015/08/04 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
python 如何上传包到pypi
2020/12/24 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
一套.net面试题及答案
2016/11/02 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
碧霞祠导游词
2015/02/09 职场文书