谈谈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 JavaScript获取Url参数,src属性参数
Mar 09 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
如何使用Javascript中的this关键字
May 28 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
当海贼王变成JOJO风
2020/03/02 日漫
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JavaScript 异步调用
2017/10/25 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
python实现画图工具
2020/08/27 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
音乐学个人的自荐书范文
2013/11/26 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
教导处工作制度
2014/01/18 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015年三万活动总结
2015/03/25 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
考试后的感想
2015/08/07 职场文书
听课评课活动心得体会
2016/01/15 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
SQL Server中搜索特定的对象
2022/05/25 SQL Server