vue.js实现含搜索的多种复选框(附源码)


Posted in Javascript onMarch 23, 2017

前言

最近在重构一个复选框组件,原型是select2这个jQuery插件, 有兴趣的可以去搜下,封装的很好,但是并不能满足业务所有需求,最要命的是jquery插件这种以dom驱动数据的库,并不能和vue和angular这种数据驱动dom的框架很好的结合,所以我用vue的component重构了一下,走了不少弯路,做的demo分享出来,还请大家指点一二!

download地址:vue_select2(3water.com).rar

效果图如下,封装的应该是蛮抽象的了,只需要传入下拉框选项list,默认选中list,和回调callback三个参数可以了,在这里特别说明下父与子是如何通信的,因为这里走了不少弯路!!

父级往子组件传递数据,通过v-bind绑定数据,子组件接收props里的数据,通过watch监听数据改变。

子组件往父级传递数据,通过$dispatch派发,绑定到自定义的selected或inputed事件,再触发父级的回调。

vue.js实现含搜索的多种复选框(附源码)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript小技巧 2.5 则
Sep 12 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 #Javascript
JS实现两周内自动登录功能
Mar 23 #Javascript
面试常见的js算法题
Mar 23 #Javascript
Vue.Js中的$watch()方法总结
Mar 23 #Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 #Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
You might like
PHP新手上路(六)
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
英国电子专家:maplin
2019/09/04 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
如何进行Linux分区优化
2013/02/12 面试题
小学生安全保证书
2014/02/01 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
广告语设计及教案
2014/03/21 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
社会学专业求职信
2014/07/17 职场文书
村级四风对照检查材料
2014/08/24 职场文书
小学班主任事迹材料
2014/12/17 职场文书
小学科学教学计划
2015/01/21 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
小孩不笨观后感
2015/06/03 职场文书
埃及王子观后感
2015/06/16 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android