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 相关文章推荐
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
PHP7新特性简述
Jun 11 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
vue组件的路由高亮问题解决方法
May 11 Vue.js
canvas实现贪食蛇的实践
Feb 15 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
PHP6新特性分析
2016/03/03 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
jquery tools之tooltip
2009/07/25 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
js实现随机8位验证码
2020/07/24 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
查看python下OpenCV版本的方法
2018/08/03 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
python画图常规设置方式
2020/03/05 Python
教师自我评价范例
2013/09/24 职场文书
职业教育毕业生求职信
2013/11/09 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
销售经理工作检讨书
2015/02/19 职场文书
社团个人总结范文
2015/03/05 职场文书