谈谈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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
javascript常用功能汇总
Jul 05 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 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
几个实用的PHP内置函数使用指南
2014/11/27 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
8个必备的PHP功能开发
2015/10/02 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python numpy格式化打印的实例
2018/05/14 Python
对Python 语音识别框架详解
2018/12/24 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
入党积极分子思想汇报范文
2014/01/05 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
5.1手机促销活动
2014/01/17 职场文书
高中生自我评语大全
2014/01/19 职场文书
中学生评语大全
2014/04/18 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
如何理解及使用Python闭包
2021/06/01 Python
nginx容器方式反向代理实战
2022/04/18 Servers