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 对象中的类数组操作
Apr 27 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
js图片自动切换效果处理代码
May 07 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php验证手机号码
2015/11/11 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
详解Python多线程
2016/11/14 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python实现Restful API的例子
2019/08/31 Python
python实现串口通信的示例代码
2020/02/10 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
python属于解释型语言么
2020/06/15 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
2014年教务处工作总结
2014/12/03 职场文书
入党转正申请报告
2015/05/15 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python