vue.js实现含搜索的多种复选框（附源码）
更新时间：2017年03月23日 11:54:57 作者：lemon678
这篇文章主要给大家介绍了利用vue.js实现含搜索的多种复选框的相关资料，文中给出了简单的介绍，但提供了完整的实例源码供大家下载学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
前言
最近在重构一个复选框组件，原型是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实现简单跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
在Vue3中,ref主要用于基本数据类型和单个数据管理,需要用.value访问,reactive适用于对象和多数据管理,直接访问属性,ref支持解构保持响应性,reactive解构后失去响应性,选择合适的方法可以使代码更优化2024-11-11
这篇文章主要介绍了从源码角度来回答keep-alive组件的缓存原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了vue简单的二维数组循环嵌套方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在Vue的开发过程中，我们经常需要展示代码片段或者进行代码高亮与语法着色，Vue提供了多种方式来实现代码高亮与语法着色，本文将为你详细介绍这些方法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue项目热更新的坑及解决方案，具有很好的参考价值，希望对的大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue-cli与webpack处理静态资源的方法及webpack打包的坑
这篇文章主要介绍了vue-cli与webpack处理静态资源的方法,需要的朋友可以参考下2018-05-05
这篇文章主要为大家分享了一篇值得收藏的vuejs安装教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了vue.js模拟日历插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了Vue.js构建你的第一个包并在NPM上发布的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论