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 相关文章推荐
javascript中的document.open()方法使用介绍
Oct 09 Javascript
js动态创建标签示例代码
Jun 09 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python工程师面试必备25条知识点
2018/01/17 Python
python爬取网页转换为PDF文件
2018/06/07 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
超市中秋节促销方案
2014/03/21 职场文书
个人欠款担保书
2014/05/20 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015年加油站工作总结
2015/05/13 职场文书
校园之声广播稿
2015/08/18 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书