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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
js常用函数 不错
2006/09/08 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
javascript实现画板功能
2020/04/12 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python判断有效的数独算法示例
2019/02/23 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
高二政治教学反思
2014/02/01 职场文书
超市开学活动方案
2014/03/01 职场文书
会计核算科岗位职责
2014/03/19 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书