深入了解Vue.js 混入(mixins)


Posted in Javascript onJuly 23, 2020

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

来看一个简单的实例:

var vm = new Vue({
  el: '#databinding',
  data: {
  },
  methods : {
  },
});
// 定义一个混入对象
var myMixin = {
  created: function () {
    this.startmixin()
  },
  methods: {
    startmixin: function () {
      document.write("欢迎来到混入实例");
    }
  }
};
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component();

选项合并

当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。

比如,数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先。

以下实例中,Vue 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

var mixin = {
  created: function () {
    document.write('混入调用' + '<br>')
  }
}
new Vue({
  mixins: [mixin],
    created: function () {
    document.write('组件调用' + '<br>')
  }
});

输出结果为:

混入调用
组件调用

如果 methods 选项中有相同的函数名,则 Vue 实例优先级会较高。如下实例,Vue 实例与混入对象的 methods 选项都包含了相同的函数:

var mixin = {
  methods: {
    hellworld: function () {
      document.write('HelloWorld 方法' + '<br>');
    },
    samemethod: function () {
      document.write('Mixin:相同方法名' + '<br>');
    }
  }
};
var vm = new Vue({
  mixins: [mixin],
  methods: {
    start: function () {
      document.write('start 方法' + '<br>');
    },
    samemethod: function () {
      document.write('Main:相同方法名' + '<br>');
    }
  }
});
vm.hellworld();
vm.start();
vm.samemethod();

输出结果为:

HelloWorld 方法
start 方法
Main:相同方法名

以上实例,我们调用了以下三个方法:

vm.hellworld();
vm.start();
vm.samemethod();

从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

全局混入

也可以全局注册混入对象。注意使用! 一旦使用全局混入对象,将会影响到 所有 之后创建的 Vue 实例。使用恰当时,可以为自定义对象注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})
 
new Vue({
 myOption: 'hello!'
})
// => "hello!"

谨慎使用全局混入对象,因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

以上就是深入了解Vue.js 混入的详细内容,更多关于Vue.js 混入的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
js实现前端分页页码管理
Jan 06 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 #Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 #Javascript
JS实现鼠标按下拖拽效果
Jul 23 #Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 #Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 #Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 #Javascript
JS前后端实现身份证号验证代码解析
Jul 23 #Javascript
You might like
一段防盗连的PHP代码
2006/12/06 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
PHP7新功能总结
2019/04/14 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python树的同构学习笔记
2019/09/14 Python
python迭代器常见用法实例分析
2019/11/22 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python中os.remove()用法及注意事项
2021/01/31 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
社会调查研究计划书
2014/05/01 职场文书
公司活动总结怎么写
2014/06/25 职场文书
场地使用证明模板
2014/10/25 职场文书
python - asyncio异步编程
2021/04/06 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA