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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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(2)
2006/10/09 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
jquery中动态效果小结
2010/12/16 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
小小聊天室Python代码实现
2016/08/17 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python3 元组tuple入门基础
2020/02/09 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
python3中for循环踩过的坑记录
2020/12/14 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
同意迁入证明模板
2014/10/26 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python