谈谈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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
Ajax::prototype 源码解读
Jan 22 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
详解javascript中的Error对象
Apr 25 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
js不是基础的基础
2006/12/24 Javascript
JS获取父节点方法
2009/08/20 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Django model select的多种用法详解
2019/07/16 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
办公室文秘岗位职责
2013/11/15 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
Python实现byte转integer
2021/06/03 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python