深入了解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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 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/10/09 PHP
PHP中的float类型使用说明
2010/07/27 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python基于requests库爬取网站信息
2020/03/02 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
Django多数据库联用实现方法解析
2020/11/12 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
教师业务学习制度
2014/01/25 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技