vue.js實(shí)現(xiàn)含搜索的多種復(fù)選框（附源碼）
前言
最近在重構(gòu)一個復(fù)選框組件，原型是select2這個jQuery插件， 有興趣的可以去搜下，封裝的很好，但是并不能滿足業(yè)務(wù)所有需求，最要命的是jquery插件這種以dom驅(qū)動數(shù)據(jù)的庫，并不能和vue和angular這種數(shù)據(jù)驅(qū)動dom的框架很好的結(jié)合，所以我用vue的component重構(gòu)了一下，走了不少彎路，做的demo分享出來，還請大家指點(diǎn)一二！
download地址：vue_select2(jb51.net).rar
效果圖如下，封裝的應(yīng)該是蠻抽象的了，只需要傳入下拉框選項(xiàng)list，默認(rèn)選中l(wèi)ist，和回調(diào)callback三個參數(shù)可以了，在這里特別說明下父與子是如何通信的，因?yàn)檫@里走了不少彎路！！
父級往子組件傳遞數(shù)據(jù)，通過v-bind綁定數(shù)據(jù)，子組件接收props里的數(shù)據(jù)，通過watch監(jiān)聽數(shù)據(jù)改變。
子組件往父級傳遞數(shù)據(jù)，通過$dispatch派發(fā)，綁定到自定義的selected或inputed事件，再觸發(fā)父級的回調(diào)。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Vue+better-scroll 實(shí)現(xiàn)通訊錄字母索引的示例代碼
通訊錄字母索引是常用的一種功能，本文主要介紹了Vue+better-scroll 實(shí)現(xiàn)通訊錄字母索引，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了使用Vue組件實(shí)現(xiàn)一個簡單彈窗效果,本文主要內(nèi)容會涉及到彈窗遮罩的實(shí)現(xiàn)， slot 插槽的使用方式，props 、 $emit 傳參，具體組件代碼也傳上去了。需要的朋友可以參考下2018-04-04
vue實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue代理報錯404問題及解決(vue配置proxy)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue3.0如何在全局掛載對象和方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue-table實(shí)現(xiàn)添加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
解決VUE3 keep-alive頁面切換報錯parentComponent.ctx.deactivate
這篇文章主要介紹了解決VUE3 keep-alive頁面切換報錯parentComponent.ctx.deactivate is not a function的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解如何在Vue中快速實(shí)現(xiàn)數(shù)據(jù)可視化大屏展示
在現(xiàn)代數(shù)據(jù)驅(qū)動的應(yīng)用程序中,數(shù)據(jù)可視化大屏已經(jīng)成為了非常重要的一環(huán),通過對海量數(shù)據(jù)進(jìn)行可視化展示,可以幫助用戶更好地理解和分析數(shù)據(jù),從而做出更加明智的決策,在Vue中進(jìn)行數(shù)據(jù)可視化大屏展示也變得越來越流行,本文將介紹如何在Vue中快速實(shí)現(xiàn)數(shù)據(jù)可視化大屏展示2023-10-10
vue.js實(shí)現(xiàn)雙擊放大預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)雙擊放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06