深入了解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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
用javascript实现页面打印的三种方法
Mar 05 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
JS的数组迭代方法
Feb 05 Javascript
jQuery原生的动画效果
Jul 10 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 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
Parse正式发布开源PHP SDK
2014/08/11 PHP
php常量详细解析
2015/10/27 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
详解python-图像处理(映射变换)
2019/03/22 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
考试诚信承诺书
2014/05/23 职场文书
检讨书范文2000字
2015/01/28 职场文书
护士节慰问信
2015/02/15 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
交通事故被告代理词
2015/05/23 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Python多线程 Queue 模块常见用法
2021/07/04 Python