深入了解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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
vue中路由跳转不计入history的操作
Sep 21 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的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP分享图片的生成方法
2018/04/25 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
python异步任务队列示例
2014/04/01 Python
Python 正则表达式(转义问题)
2014/12/15 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
django自定义模板标签过程解析
2019/12/14 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
客服文员岗位职责
2013/11/29 职场文书
工作保证书范文
2014/04/29 职场文书
验房委托书
2014/08/30 职场文书
临时用工协议书范本
2014/10/29 职场文书
英文慰问信
2015/02/14 职场文书
合作协议书格式范本
2016/03/21 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
创业计划书之家政服务
2019/09/18 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技