谈谈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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 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
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
js 居中漂浮广告
2010/03/21 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
JS实现手风琴特效
2020/11/08 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python获取栅格点和面值的实现
2020/03/10 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
个人工作主要事迹
2014/05/08 职场文书
公司承诺书格式
2014/05/21 职场文书
2015入党自传格式范文
2015/06/26 职场文书