Vue中的混入的使用(vue mixins)


Posted in Javascript onJune 01, 2018

使用场景:

例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新,或者使用的都是一个方法的时候,我们就可以使用vue mixins进行封装调用,以及继承,具体看代码。

选项合并

var mixin = {
        data: function () {
        return {
         message: 'hello'
        }
       },
       created:function(){
        console.log('我是mixins中的created')
       },
       methods:{
        show:function(num){
          console.log(num) //mixins种的函数可以接收组件种的传参。
        },
        foo: function () {
         console.log('foo')
        },
        conflicting: function () {
         console.log('from mixin')
        }
       }
      }

      var vm = new Vue({
       mixins: [mixin],
       data: function () {
        return {
         title: 'def',
         message: 'goodbye'
        }
       },
       created: function () {
        console.log('我是Vue中的created')
        console.log(this.$data)
        this.show(50); //可通过函数传参,把组件中需要的参数传给mixins进行使用。
       },
       methods:{
        bar: function () {
         console.log('bar')
        },
        conflicting: function () {
         console.log('from self')
        }
       }
      })
      
      vm.foo() // => "foo"
      vm.bar() // => "bar"
      vm.conflicting() // => "from self"

注意以下三点:

1、当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。比如,数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先。

2、同名钩子函数将混合为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。

3、值为对象的选项,例如 methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。

全局混入

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

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

new Vue({
 myOption: 'hello!'
})
// => "hello!"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 #Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 #Javascript
Express之托管静态文件的方法
Jun 01 #Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 #Javascript
详解Angular操作cookies方法
Jun 01 #Javascript
浅谈手写node可读流之流动模式
Jun 01 #Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 #Javascript
You might like
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
django之session与分页(实例讲解)
2017/11/13 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python实现简单名片管理系统
2018/11/30 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
基于keras中的回调函数用法说明
2020/06/17 Python
PyTorch安装与基本使用详解
2020/08/31 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
六十岁生日答谢词
2014/01/10 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
教师节随笔
2015/08/15 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
高中数学教学反思范文
2016/02/18 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
Python内置的数据类型及使用方法
2022/04/13 Python