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 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
React Native react-navigation 导航使用详解
2017/12/01 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
Python实现SVN的目录周期性备份实例
2015/07/17 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
详解python的数字类型变量与其方法
2016/11/20 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python使用udp实现聊天器功能
2018/12/10 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Sql面试题
2013/03/20 面试题
交通事故协议书
2014/04/15 职场文书
信息管理专业自荐书
2014/06/05 职场文书
大学生心理活动总结
2014/07/04 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
2016春季运动会前导词
2015/11/25 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL