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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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/11/26 PHP
PHP一些有意思的小区别
2006/12/06 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
javascript 节点排序 2
2011/01/31 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
JS面向对象编程详解
2016/03/06 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
浅入深出Vue之组件使用
2019/07/11 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python删除列表中重复记录的方法
2015/04/28 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python的unittest测试类代码实例
2017/12/07 Python
详解python的argpare和click模块小结
2019/03/31 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
小学美术教学反思
2014/02/01 职场文书
服务员岗位职责
2015/02/03 职场文书
PHP新手指南
2021/04/01 PHP