谈谈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 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
js实现不重复导入的方法
Mar 02 Javascript
Javascript的无new构建实例详解
May 15 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
在react中使用vuex的示例代码
Jul 30 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JS实现网页时钟特效
Mar 25 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
javascript编程起步(第七课)
2007/02/27 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
原生JS实现瀑布流插件
2018/02/06 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python内置模块logging用法实例分析
2018/02/12 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python 私有化操作实例分析
2019/11/21 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
普天C++笔试题
2016/03/20 面试题
护理工作感言
2014/01/16 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
门面房租房协议书
2014/12/01 职场文书
会议主持人开场白台词
2015/05/28 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python