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代码
Nov 10 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
js+canvas实现刮刮奖功能
Sep 13 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
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
python实现神经网络感知器算法
2017/12/20 Python
浅谈Python的list中的选取范围
2018/11/12 Python
详解Python正则表达式re模块
2019/03/19 Python
解决python运行效率不高的问题
2020/07/20 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
你对IPv6了解程度
2016/02/09 面试题
25道Java面试题集合
2013/05/21 面试题
《七颗钻石》教学反思
2014/02/28 职场文书
鸿星尔克广告词
2014/03/21 职场文书
寄语学生的话
2014/04/10 职场文书
法制宣传日活动总结
2014/04/29 职场文书
园林系毕业生求职信
2014/06/23 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
刑事案件上诉状
2015/05/23 职场文书
2016年父亲节寄语
2015/12/04 职场文书
Python实现8种常用抽样方法
2021/06/27 Python