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滚动字幕效果实现代码
Jun 22 Javascript
js charAt的使用示例
Feb 18 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JavaScript将数组转换为链表的方法
Feb 16 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
javascript中闭包closure的深入讲解
Mar 03 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
德生9700DX电路分析
2021/03/02 无线电
Zend Guard一些常见问题解答
2008/09/11 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
nodejs分页类代码分享
2014/06/17 NodeJs
jQuery中even选择器的定义和用法
2014/12/23 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
vue实现拖拽进度条
2021/03/01 Vue.js
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python爬豆瓣电影实例
2018/02/23 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
wxPython实现画图板
2020/08/27 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
护士思想汇报
2014/01/12 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
人事专员的职责
2014/02/26 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技