谈谈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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
node.js require() 源码解读
2015/12/13 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python日志器使用方法及原理解析
2020/09/27 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
学校门卫管理制度
2014/01/30 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
植树节口号
2014/06/21 职场文书
五年级下册复习计划
2015/01/19 职场文书
锅炉工岗位职责
2015/02/13 职场文书
离婚被告答辩状
2015/05/22 职场文书
合同补充协议书
2016/03/24 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL