vue.js实现含搜索的多种复选框（附源码）
更新时间：2017年03月23日 11:54:57 作者：lemon678
这篇文章主要给大家介绍了利用vue.js实现含搜索的多种复选框的相关资料，文中给出了简单的介绍，但提供了完整的实例源码供大家下载学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
最近在重构一个复选框组件，原型是select2这个jQuery插件， 有兴趣的可以去搜下，封装的很好，但是并不能满足业务所有需求，最要命的是jquery插件这种以dom驱动数据的库，并不能和vue和angular这种数据驱动dom的框架很好的结合，所以我用vue的component重构了一下，走了不少弯路，做的demo分享出来，还请大家指点一二！
download地址：vue_select2(jb51.net).rar
效果图如下，封装的应该是蛮抽象的了，只需要传入下拉框选项list，默认选中list，和回调callback三个参数可以了，在这里特别说明下父与子是如何通信的，因为这里走了不少弯路！！
父级往子组件传递数据，通过v-bind绑定数据，子组件接收props里的数据，通过watch监听数据改变。
子组件往父级传递数据，通过$dispatch派发，绑定到自定义的selected或inputed事件，再触发父级的回调。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对程序员之家的支持。
相关文章
浅谈vue-cli加载不到dev-server.js的解决办法
本篇文章主要介绍了浅谈vue-cli加载不到dev-server.js的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
Vuex的插件vuex-persistedstate数据持久化存储操作
这篇文章主要介绍了Vuex的插件vuex-persistedstate数据持久化存储操作,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
有很多关于vue的todolist小程序，这篇文章主要介绍了 用vue写todolist单页应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
在使用Element Plus中的table组件展示数据时,由于需要对表格行内数据的数据进行修改,下面这篇文章主要给大家介绍了关于Element?Plus修改表格行和单元格样式的相关资料,需要的朋友可以参考下2022-04-04
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）
这篇文章主要介绍了vue搜索页开发实例（热门搜索，历史搜索，淘宝接口演示）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系，这篇文章主要介绍了vue?webpack打包原理,本篇介绍的有点长，希望大家耐心阅读2023-02-02
Vue+Webpack完美整合富文本编辑器TinyMce的方法
这篇文章主要介绍了Vue+Webpack完美整合富文本编辑器TinyMce的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要为大家详细介绍了vue登录页面设置验证码input框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue使用splice()删除数组中的一个数据 弹出窗口提示问题
这篇文章主要介绍了vue使用splice()删除数组中的一个数据 弹出窗口提示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue项目使用websocket连接问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论