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中substr,substring,slice.splice的区别说明
Nov 25 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
JavaScript中的闭包
Feb 24 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
js实现简单的随机点名器
Sep 17 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中显示格式化的用户输入
2006/10/09 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
JPA面试常见问题
2016/11/14 面试题
医学护理系毕业生求职信
2013/10/01 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
招商专员岗位职责
2014/02/08 职场文书
医德医风演讲稿
2014/05/20 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS