vue.js實現(xiàn)含搜索的多種復(fù)選框（附源碼）
更新時間：2017年03月23日 11:54:57 作者：lemon678
這篇文章主要給大家介紹了利用vue.js實現(xiàn)含搜索的多種復(fù)選框的相關(guān)資料，文中給出了簡單的介紹，但提供了完整的實例源碼供大家下載學(xué)習(xí)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
前言
最近在重構(gòu)一個復(fù)選框組件，原型是select2這個jQuery插件， 有興趣的可以去搜下，封裝的很好，但是并不能滿足業(yè)務(wù)所有需求，最要命的是jquery插件這種以dom驅(qū)動數(shù)據(jù)的庫，并不能和vue和angular這種數(shù)據(jù)驅(qū)動dom的框架很好的結(jié)合，所以我用vue的component重構(gòu)了一下，走了不少彎路，做的demo分享出來，還請大家指點一二！
download地址：vue_select2(jb51.net).rar
效果圖如下，封裝的應(yīng)該是蠻抽象的了，只需要傳入下拉框選項list，默認(rèn)選中l(wèi)ist，和回調(diào)callback三個參數(shù)可以了，在這里特別說明下父與子是如何通信的，因為這里走了不少彎路??！
父級往子組件傳遞數(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)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
在Vue3中,ref主要用于基本數(shù)據(jù)類型和單個數(shù)據(jù)管理,需要用.value訪問,reactive適用于對象和多數(shù)據(jù)管理,直接訪問屬性,ref支持解構(gòu)保持響應(yīng)性,reactive解構(gòu)后失去響應(yīng)性,選擇合適的方法可以使代碼更優(yōu)化2024-11-11
這篇文章主要介紹了從源碼角度來回答keep-alive組件的緩存原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue簡單的二維數(shù)組循環(huán)嵌套方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue的開發(fā)過程中，我們經(jīng)常需要展示代碼片段或者進行代碼高亮與語法著色，Vue提供了多種方式來實現(xiàn)代碼高亮與語法著色，本文將為你詳細(xì)介紹這些方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue項目熱更新的坑及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑
這篇文章主要介紹了vue-cli與webpack處理靜態(tài)資源的方法,需要的朋友可以參考下2018-05-05
這篇文章主要為大家分享了一篇值得收藏的vuejs安裝教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue.js構(gòu)建你的第一個包并在NPM上發(fā)布的方法步驟
這篇文章主要介紹了Vue.js構(gòu)建你的第一個包并在NPM上發(fā)布的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05