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分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
js实现目录定位正文示例
Nov 14 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
微信小程序实现底部导航
Nov 05 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php中的观察者模式简单实例
2015/01/20 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
详解JavaScript函数
2015/12/01 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python实现多进程共享数据的方法分析
2017/12/04 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
毕业生自我推荐
2013/11/04 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
单位实习证明怎么写
2014/01/17 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
Go语言怎么使用变长参数函数
2022/07/15 Golang