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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
javascript折半查找详解
Jan 26 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 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
一些星际专用术语解释
2020/03/04 星际争霸
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
用js重建星际争霸
2006/12/22 Javascript
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python如何让类支持比较运算
2018/03/20 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
详解python和matlab的优势与区别
2019/06/28 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
空指针到底是什么
2012/08/07 面试题
资料员的岗位职责
2013/11/20 职场文书
公司活动邀请函
2014/01/24 职场文书
高考备战决心书
2014/03/11 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
庆七一主持词
2015/06/29 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
MySQL去除密码登录告警的方法
2022/04/20 MySQL
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android