Vue使用mixin分发组件的可复用功能


Posted in Javascript onSeptember 01, 2019

vue创建高阶组件的实现不够react优雅,但那是vue和react的设计思想导致的。在react中一切都是函数,而在vue中,组件最终都是函数,但在开发时可以是JSON对象,而且每个vue组件要注意三个点:props、events和slots,就是这三个导致vue创建高阶组件时要传入相应的属性,较react要复杂。

vue官方推荐使用mixins来完成高阶组件的功能,如果对vue实现高阶组件有兴趣的话推荐看[vue实现高阶组件][1]

下面是vue官网使用mixins的例子:

// 定义一个混入对象
var myMixin = {
 created: function () {
  this.hello()
 },
 methods: {
  hello: function () {
   console.log('hello from mixin!')
  }
 }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
 mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

每个vue组件有mixins属性接收mixin数组,但由于mixin与组件,mixin与mixin之间存在属性命名冲突的问题,vue解决这个的方式是:

1 数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。

2 值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

3 Vue.extend()和new Vue()创建的组件,解决上述的命名冲突的方案是一样的。

总结

以上所述是小编给大家介绍的Vue使用mixin分发组件的可复用功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
JavaScript页面加载事件实例讲解
Sep 01 #Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 #Javascript
vue组件命名和props命名代码详解
Sep 01 #Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 #Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 #Javascript
vue中的v-if和v-show的区别详解
Sep 01 #Javascript
react中Suspense的使用详解
Sep 01 #Javascript
You might like
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实现电子词典
2020/04/23 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python 实现矩阵按对角线打印
2019/11/29 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
新娘父亲婚礼致辞
2014/01/16 职场文书
心理健康日活动总结
2014/05/08 职场文书
服务行业口号
2014/06/11 职场文书
基层党支部整改方案
2014/10/25 职场文书
公司联欢会主持词
2015/07/04 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
Python序列化与反序列化相关知识总结
2021/06/08 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers