Vue之Mixins(混入)的使用方法


Posted in Javascript onSeptember 24, 2019

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。

比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。

var Mymixin = {
  data: function(){
   return {
    message: 'hello',
    foo: 'abc'
   }
  }
}
 export default {
  mixins:[Mymixin],
  data(){
   return{
    message:'good',
    bar:'kiss'
   }
   
  },
  created(){
   console.log(this.$data) //bar: "kiss",foo: "abc",message: "good"
  },

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

<script>
var Mymixin = {
  created: function(){
   console.log('混入对象的钩子被调用')
  }
}
 export default {
  mixins:[Mymixin],
  data(){
   return{
    message:'good',
    bar:'kiss'
   }
   
  },
  created(){
   console.log('组件钩子被调用') 
   // 混入对象的钩子被调用
   // 组件钩子被调用
  }
 }
</script>

值为对象的选项,

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

<script>
var Mymixin = {
  methods: {
   foo: function(){
    console.log('foo')
   },
   conflicting: function(){
    console.log('from mixin')
   }
  }
}
 export default {
  mixins:[Mymixin],
  created(){
   this.foo()
   this.conflicting()
   this.bar() 
   // foo
   // from self
   // bar
  },
  methods:{
   bar:function(){
    console.log('bar')
   },
   conflicting: function(){
      console.log('from self')
   }
  }
 }
</script>

全局混入

混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。可在main.js中写入
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})
在任意组件里面都可以使用
new Vue({
 myOption: 'hello!'
})
// => "hello!"
export default {
  myOption: 'hello!',
 }

请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入。

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

Javascript 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
js实现下一页页码效果
Mar 07 Javascript
react-router中的属性详解
Jun 01 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
JavaScript Array对象使用方法解析
Sep 24 #Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 #Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 #Javascript
基于layui的下拉列表的数据回显方法
Sep 24 #Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 #Javascript
layui动态渲染生成select的option值方法
Sep 23 #Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 #Javascript
You might like
PHP 可阅读随机字符串代码
2010/05/26 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
解密Python中的描述符(descriptor)
2015/06/03 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python让列表倒序输出的实例
2018/06/25 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
django项目中新增app的2种实现方法
2020/04/01 Python
Python 忽略文件名编码的方法
2020/08/01 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
经贸日语专业个人求职信范文
2013/12/28 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
司法建议书范文
2014/05/13 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
图书借阅制度范本
2015/08/06 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers