谈谈vue中mixin的一点理解


Posted in Javascript onDecember 12, 2017

 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别?

     组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。

     而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。

     单纯组件引用:

          父组件 + 子组件 >>> 父组件 + 子组件

     mixins:

          父组件 + 子组件 >>> new父组件 

     值得注意的是,在使用mixins时,父组件和子组件同时拥有着子组件内的各种属性方法,但这并不意味着他们同时共享、同时处理这些变量,两者之间除了合并,是不会进行任何通信的。最开始看到mixins的时候,天真的我似乎看到了一种向下的类似vuex的数据共享方案,心情十分激动啊。

 下面给大家介绍下Vue中的mixin

     一,mixin是什么

mixin文件是一个对象,可以包含vue组件的任意成分。是分发Vue组件可复用功能的非常灵活的方式,当mixin被组件使用时,所有minxin里的属性/方法会与组件里的属性/方法混合。

二,mixin使用

在Vue组件中可以有mixins属性,该属性值类型为数组。将mixin引入,作为mixins数组的元素mixins: [mixin]

组件A应用了mixin,两者的属性如methods,components和directives,将被混合为同一个对象,如果methods,components和directives中有同名的属性,则mixin中的将会被忽略。同名钩子函数会组成数组并都会被调用,并且mixin的钩子函数会比组件的钩子函数先被调用。

总结

以上所述是小编给大家介绍的vue中mixin,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
取得父标签
Nov 14 Javascript
日期 时间js控件
May 07 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
Vue集成Iframe页面的方法示例
Dec 12 #Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 #Javascript
Vue调试神器vue-devtools安装方法
Dec 12 #Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 #Javascript
javascript实现循环广告条效果
Dec 12 #Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 #Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 #Javascript
You might like
国内咖啡文化
2021/03/03 咖啡文化
PHP循环获取GET和POST值的代码
2008/04/09 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
js实现分割上传大文件
2016/03/09 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
js实现随机点名功能
2020/12/23 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
Django url 路由匹配过程详解
2021/01/22 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
庆七一活动方案
2014/01/25 职场文书
警校毕业生自我评价
2014/04/06 职场文书
法制宣传日活动总结
2014/04/29 职场文书
艺术教育实施方案
2014/05/03 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL