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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
简单的渐变轮播插件
Jan 12 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 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分页集合包括使用方法
2013/10/21 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
php时间戳转换代码详解
2019/08/04 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Vue指令指令大全
2019/02/09 Javascript
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
python内打印变量之%和f的实例
2020/02/19 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
车辆安全检查制度
2014/01/12 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
学习经验交流会主持词
2014/04/01 职场文书
五好关工委申报材料
2014/05/31 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
小学中等生评语
2014/12/29 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
Python中22个万用公式的小结
2021/07/21 Python