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 自定义函数缺省值的设置方法
May 05 Javascript
javascript中的事件代理初探
Mar 08 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
javascript常用的设计模式
Feb 09 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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中几种常见安全设置详解
2010/04/06 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python计算信息熵实例
2020/06/18 Python
Django多数据库联用实现方法解析
2020/11/12 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
学风建设主题班会
2015/08/17 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL