谈谈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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
input框中的name和id的区别
Nov 16 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
react ant Design手动设置表单的值操作
Oct 31 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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的类 功能齐全的发送邮件类
2006/10/09 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python随机生成彩票号码的方法
2015/03/05 Python
Python pickle模块用法实例
2015/04/14 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python基于property()函数定义属性
2020/01/22 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
请介绍一下WSDL的文档结构
2013/03/17 面试题
母亲追悼会答谢词
2014/01/27 职场文书
孝女彩金观后感
2015/06/10 职场文书
安全教育片观后感
2015/06/17 职场文书
敬老院活动感想
2015/08/07 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
MySQL快速插入一亿测试数据
2021/06/23 MySQL
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫