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