谈谈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 相关文章推荐
JS创建自定义表格具体实现
Feb 11 Javascript
jquery实现图片预加载
Dec 25 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
js实现简单页面全屏
Sep 17 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
jQuery表单设置值的方法
2017/06/30 jQuery
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
在python中使用nohup命令说明
2020/04/16 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
洗发露广告词
2014/03/14 职场文书
财务担保书范文
2014/04/02 职场文书
社区先进事迹材料
2014/05/19 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android