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  Error 对象 错误处理
May 18 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
vue使用Google地图的实现示例代码
Dec 19 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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获取当前所在目录位置的方法
2014/11/26 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
javascript每日必学之封装
2016/02/23 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python实现计算倒数的方法
2015/07/11 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
python将字母转化为数字实例方法
2019/10/04 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
培训专员岗位职责
2014/02/26 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
会计系毕业求职信
2014/08/07 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
贷款担保书范本
2015/09/22 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby