谈谈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 相关文章推荐
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
JS原生实现轮播图的几种方法
Mar 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
WHOIS类的修改版
2006/10/09 PHP
php下的权限算法的实现
2007/04/28 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
html5 标签
2009/07/16 HTML / CSS
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
律师授权委托书范本
2014/10/07 职场文书
班级管理经验交流材料
2015/11/02 职场文书
python tkinter实现定时关机
2021/04/21 Python