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学习笔记(一)基础知识
Sep 30 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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 ajax 静态分页过程形式
2011/09/02 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
golang与PHP输出excel示例
2016/07/22 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
python3处理含有中文的url方法
2018/05/10 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
户外拓展活动方案
2014/02/11 职场文书
大家访活动实施方案
2014/03/10 职场文书
激励口号大全
2014/06/17 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
班委竞选稿范文
2015/11/21 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技