谈谈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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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
php中的一个中文字符串截取函数
2007/02/14 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php正则修正符用法实例详解
2016/12/29 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
js模糊查询实例分享
2016/12/26 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
班级聚会策划书
2014/01/16 职场文书
禁毒宣传标语
2014/06/19 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
高中班主任寄语
2019/06/21 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
python 爬取吉首大学网站成绩单
2021/06/02 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android