Vue3如何实现一个全局搜索框

Vue3濡備綍瀹炵幇涓€涓叏灞€鎼滅储妗嗘濂芥渶杩戠殑椤圭洰涔熼渶瑕佸疄鐜颁竴涓叏灞€鎼滅储鐨勫姛鑳斤紝姝ｅソ鍙互鍏钩鐨勬嬁钖按瀛︿範涓€涓嬭繖涓姛鑳界殑鎬濊矾銆傜綉涓婄殑鏁欑▼姘村钩鍙傚樊涓嶉綈锛屾伆濂芥垜鍦ㄤ箣鍓嶇殑椤圭洰涓仛杩囩被浼煎叏灞€寮瑰嚭闈㈠寘灞戠殑鍔熻兘锛屼簬鏄被姣斿啓浜嗕竴涓垜浠」鐩渶瑕佺殑鍏ㄥ眬鎼滅储妗嗭紝鎯冲垎浜垜鐨勬兂娉曘€傛敞鎰忥細鏈枃涓嶄細鏁欎綘濡備綍绔嬪嵆缂栧啓浠ｇ爜锛岃€屾槸浣滀负涓€涓寚鍗楋紝閫愭寮曞浣犵悊瑙ｆ暣涓€濊矾銆傛垜灏嗕粠鈥滃鏋滄垜鏄垵瀛﹁€咃紝濡傛灉鎴戝湪瀛︿範杩欎簺鐭ヨ瘑鐨勬椂鍊欏埆浜鸿兘杩欐牱鍛婅瘔鎴戯紝閭ｄ箞鎴戝氨鑳藉緢蹇悊瑙ｂ€濈殑瑙掑害鏉ヨВ閲娿€傛巿浜轰互楸间笉濡傛巿浜轰互娓斻€傚笇鏈涘ぇ瀹跺湪闃呰杩欑瘒鏂囩珷鐨勬椂鍊欙紝鑳藉鎷撳睍鎬濊矾锛屼妇涓€鍙嶄笁銆?.鏂囦欢鍑嗗鍓嶆湡闇€瑕佸噯澶囦笁涓枃浠舵潵瀹屾垚鍏ㄥ眬鎼滅储妗哠earchBar.ts鏂囦欢SearchBar.vue鏂囦欢useSearch.ts鏂囦欢2.鎼滅储妗嗙殑鏍峰紡涓嶆槸鏈枃鐨勯噸鐐癸紝浣犲彲浠ュ湪SearchBar涓婅姳浜斿垎閽熷湪.vue鏂囦欢涓敾鍑轰竴涓潪甯哥畝鍗曠殑姝ｆ柟褰iv骞跺寘瑁逛竴涓猧nput鏍囩鏉ュ揩閫熷涔犱互涓嬪唴瀹广€備絾棣栧厛鎴戜滑闇€瑕佺悊娓呮€濊矾銆傝繖涓粍浠朵細鍑虹幇鍦ㄦ垜浠〉闈㈢殑椤堕儴锛屾墍浠ラ渶瑕佸湪缁勪欢鍐呴儴浣跨敤缁濆甯冨眬銆傝鎴戜滑鍘籗earchBar.vue涓烘渶澶栧眰鐨刣iv璁剧疆鏍峰紡銆傝繖閲岀殑鍏朵粬鏍峰紡浣跨敤UnoCSS銆傛病鐢ㄨ繃鐨勬湅鍙嬩笉鐢ㄦ媴蹇冦€傚彧鏄畝鍗曠殑椋庢牸锛屼笌鏈枃鍐呭鏃犲叧銆?锛坈ss鍐欐垚computedproperty鍦ㄨ繖涓満鏅病鏈変粈涔堢壒娈婃剰涔夛紝鍙槸绠€鍗曠殑璁捐鑰冭檻姣旇緝澶氾級3.娓叉煋鍑芥暟h鍜宺ender鍑芥暟锛堝叧閿偣锛夋墦寮€涔嬪墠鍑嗗濂界殑SearchBar.ts鏂囦欢锛屼粠涓鍏ヨ繖涓や釜鍑芥暟vue锛屽苟灏嗕笂涓€姝ョ紪鍐欑殑绠€鏄撶増鎼滅储妗嗭紙SearchBar.vue锛夊紩鍏ュ埌璇ユ枃浠朵腑銆傜湅杩囨垜涓婁竴绡囨枃绔燰ue3瀹炵幇涓€涓猅oast鐨勮鑰呭彲鑳芥瘮杈冪啛鎮夛紝浣嗘槸鍦ㄩ偅绡囨枃绔犱腑锛岀敱浜庢垜涔熸槸绗竴娆℃帴瑙﹁繖涓や釜鍔熻兘锛屾墍浠ュ綋鏃剁殑鎬荤粨涓嶆槸鐗瑰埆鍑嗙‘锛屾墍浠ラ噸鏂版暣鐞嗕簡涓€涓嬫垜鐨勬兂娉曘€傛垜鍦ㄨ繖閲屽啀瑙ｉ噴涓€涓嬨€傞鍏堟垜浠粠瀹樼綉鐨勪粙缁嶆潵鐪嬩竴涓嬭繖涓嚱鏁扮殑瀹氫箟銆傚彲浠ョ湅鍑鸿繖涓嚱鏁扮殑绗竴涓弬鏁版槸蹇呴』鐨勶紝鍙互鏄瓧绗︿覆涔熷彲浠ユ槸Component銆傛湰鏂囦富瑕侀拡瀵瑰弬鏁颁负Component鐨勬儏鍐点€傞噸鐐规槸杩欎釜鍑芥暟鐨勮繑鍥炲€兼槸涓€涓猇Node銆俈irtualNode杩欎釜澶у鑲畾涓嶉檶鐢熴€傜湅瀹岃繖绡囨枃绔犵殑璇昏€呭彲鑳藉铏氭嫙dom鐨勫師鐞嗕笉鏄偅涔堟竻妤氾紝浣嗘槸鐩镐俊浣犱竴瀹氱煡閬撳畠鐨勫熀鏈満鍒躲€俈ue瀹為檯涓婃槸鍏堟覆鏌撹櫄鎷焏om-->鐒跺悗灏嗗叾杞崲涓虹湡瀹炵殑dom銆備笉瑕佹€ヤ簬鍐欎唬鐮侊紝鎴戞兂浣犲彲鑳芥洿浜嗚В杩欑鍐欐硶锛屾瘮濡傛垜浠箣鍓嶅湪SearchBar.vue鏂囦欢涓啓鐨勭畝鍗曞脊鍑烘銆傛暣涓粍浠剁殑鏍峰紡鏄啓鍦╒ue鎻愪緵鐨刓