深入了解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 相关文章推荐
用于table内容排序
Jul 21 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
一个简单的php路由类
2016/05/29 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python 伯努利分布详解
2020/02/25 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
中学门卫岗位职责
2013/12/26 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
2015年老干部工作总结
2015/04/23 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫