鏈枃浠嬬粛鐐硅禐+鍏虫敞+鏀惰棌=浜嗚В鍒板湪鏃ュ父鐨刅ue椤圭洰涓紝澶ф鐜囦細鐢ㄥ埌缁勪欢搴撴潵杈呭姪寮€鍙戯紝鎵€浠ラ€掑綊缁勪欢鐨勫嚭闀滅巼鍙兘涓嶆槸寰堥珮.浣嗚繖骞朵笉鎰忓懗鐫€閫掑綊缁勪欢涓嶉噸瑕併€傝繖绡囨枃绔犲ぇ绾﹂渶瑕?0鍒嗛挓锛岃浣犳帉鎻￠€掑綊缁勪欢鐨勭敤娉曘€傚湪姝や箣鍓嶏紝浣犲繀椤绘帉鎻★細html+css+js+Vue3鐨勫熀鏈敤娉曪紝鑷冲皯浣犻渶瑕佺煡閬撲粈涔堟槸Vue缁勪欢銆傜敤娉曡В閲婂湪璁茶В閫掑綊缁勪欢涔嬪墠锛屾垜浠渶瑕佷簡瑙ｅ嚑涓蹇点€備粈涔堟槸閫掑綊锛熺櫨搴︾櫨绉戜腑瀵归€掑綊鐨勫畾涔夋槸锛氱▼搴忚皟鐢ㄨ嚜韬殑缂栫▼鎶€鏈О涓洪€掑綊锛坮ecursion锛夈€備綘鍙互鎶婇€掑綊澶ц嚧鐞嗚В涓轰竴涓惊鐜紝浣嗘槸閫掑綊鏄湪璋冪敤鑷繁銆傚湪瀹為檯浣跨敤涓紝闇€瑕佷负閫掑綊璁剧疆涓€涓竟鐣屾潯浠讹紝骞堕€氳繃杩欎釜杈圭晫鏉′欢鏉ュ垽鏂槸鍚︾户缁€掑綊銆傚鏋滀笉璁剧疆鍒ゆ柇鏉′欢锛屽氨浼氬鑷存棤闄愰€掑綊锛屼篃灏辨槸姝诲惊鐜紒浠€涔堟槸閫掑綊缁勪欢锛熺湅鍒拌繖閲岋紝鐩镐俊澶у閮界煡閬撲粈涔堟槸Vue缁勪欢浜嗗惂銆傛垜鍏堟妸銆奦ue3 閫掑綊缁勪欢 鏂囨。銆嬫斁鍦ㄨ繖閲屻€傞€掑綊缁勪欢鍏跺疄灏辨槸鈥滈€掑綊鈥濆拰鈥滅粍浠垛€濈殑缁撳悎銆傜粍浠跺湪杈圭晫鏉′欢鍐呬笉鏂皟鐢ㄨ嚜韬紝鐩村埌瓒呭嚭杈圭晫鏉′欢涓烘銆傞€掑綊缁勪欢鐢ㄥ湪鍝噷锛熷湪鎴戠殑宸ヤ綔涓紝浼氬嚭鐜伴€掑綊缁勪欢锛氣€滄爲鈥濈粍浠讹細鐢ㄤ簬鏄剧ず鏂囦欢灞傛缁撴瀯銆傚乏渚у鑸爮锛氭牴鎹矾鐢卞眰绾х敓鎴愮殑瀵艰埅鑿滃崟銆傚绾ц〃锛堝祵濂楄〃锛夈€傚姩鎵嬫搷浣滅粡杩囧墠闈㈢殑璁茶В锛岀浉淇″ぇ瀹跺閫掑綊缁勪欢鏈変簡涓€瀹氱殑姒傚康銆備笅闈㈢敤涓€涓畝鍗曠殑渚嬪瓙鏉ヨ鏄庛€備笂鍥炬槸鏈瑕佸疄鐜扮殑涓€涓緥瀛愩€傛牱寮忔垜娌″啓锛屽ぇ瀹舵斁杞绘澗锛屽彂鎸ヤ綘鐨勬兂璞″姏锛屾妸杩欎釜鎯宠薄鎴愮綉绔欑殑宸︿晶瀵艰埅鏍忋€傝繖绉嶅鑸爮鏄‖缂栫爜鍦ㄥ墠绔殑锛涙湁浜涘啓鏈嶅姟闇€瑕佸悗绔厤缃紝鍓嶇璇锋眰杩斿洖瀵艰埅鏍忔暟鎹敓鎴愯矾鐢便€傛墍浠ュ彲浠ヨ繖鏍风悊瑙ｏ紝鍓嶇涓€寮€濮嬪苟涓嶇煡閬撳鑸湁澶氬皯绾с€傝繖鏃跺€欏彲浠ラ€氳繃閫掑綊缁勪欢鐨勬柟寮忔潵瀹炵幇銆傛楠ゅ涓嬶細鍒涘缓涓€涓鑸粍浠讹紝骞跺湪鍏ㄥ眬娉ㄥ唽瀵艰埅缁勪欢锛岃幏鍙栨暟鎹紙鏈緥涓哄涔犵洰鐨勶紝鎵€浠ユ暟鎹湪鍓嶇纭紪鐮侊級鍦ㄥ鑸粍浠朵腑璁剧疆閫掑綊杈圭晫锛屾覆鏌揹ata1.鍒涘缓涓€涓粍浠舵垜鍛藉悕涓哄鑸粍浠禦ootNav銆傜湅銆傚苟灏嗗叾鏀惧湪缁勪欢鐩綍涓€俁ootNav.vueRootnav
姝ゆ椂椤圭洰鐩綍濡備笅锛氱渷鐣ラ儴鍒嗙洰褰曞拰鏂囦欢-src|-main.js|-App.vue|-components|-RootNav.vue2.鍏ㄥ眬娉ㄥ唽缁勪欢鎴戝湪鍏ㄥ眬娉ㄥ唽RootNav.vue缁勪欢锛岃繖鏍稲ootNav.vue鍙互鏂逛究鐨勮皟鐢ㄨ嚜宸便€俶ain.jsimport{createApp}from'vue'importAppfrom'./App.vue'importRootNavfrom'./components/RootNav.vue'//瀵煎叆RootNav缁勪欢constapp=createApp(App)app.component('RootNav',RootNav)//灏哛ootNav娉ㄥ唽涓哄叏灞€缁勪欢app.mount('#app')浣跨敤App.vue涓殑App.vue
鐨勬帴鍙ｆ祻瑙堝櫒濡備笂鍥炬墍绀恒€?銆佽幏鍙栧鑸暟鎹湪瀹為檯椤圭洰涓紝宸︿晶瀵艰埅鍙兘浼氫粠鍚庡彴鑾峰彇銆備絾鏄繖绡囨枃绔犵殑鐩殑鏄涔犻€掑綊缁勪欢锛屾墍浠ョ洿鎺ュ湪鍓嶇妯℃嫙浜嗕竴涓€滆姹傛暟鎹€濄€傛垜灏嗏€滆姹傛暟鎹€濇搷浣滄斁鍦ˋpp.vue涓€傜劧鍚庨€氳繃props浼犲叆RootNav.vue缁勪欢銆傝鍒伴亾鍏凤紝椤轰究鎻愪竴涓嬶細銆奦ue3 杩?0绉嶇粍浠堕€氳鏂瑰紡銆婣pp.vue
RootNav.vueRootNav
姝ゆ椂锛孯ootNav.vue涓帴鏀跺埌浜嗏€滆姹傜殑瀵艰埅鏁版嵁鈥濄€?.璁剧疆閫掑綊杈圭晫骞舵覆鏌撴暟鎹€傛垜浠湅鍒板鑸暟鎹湁涓€涓猚hildren瀛楁锛屾剰鎬濇槸鈥滃瓙鑿滃崟鈥濄€傛垜浠彲浠ラ€氳繃鏄惁鏈塩hildren瀛楁鏉ュ垽鏂槸鍚︾户缁€掑綊銆備篃灏辨槸璇达紝children鏄€掑綊鐨勮竟鐣屾潯浠躲€俁ootNav.vue<鑴氭湰璁剧疆>constprops=defineProps({list:{type:Array,default:()=>[]}})杩欓儴鍒嗙殑閲嶇偣鏄疕TML浠ｇ爜銆傝嚦姝わ紝鍘熷畾鐩爣宸茬粡瀹屾垚銆傚畬鏁翠唬鐮乵ain.jsimport{createApp}from'vue')app.mount('#app')App.vue
components/RootNav.vue鎺ㄨ崘闃呰馃憤銆婃墽琛寁ue create鏃跺埌搴曞仛浜嗕粈涔堛€嬸煈嶃€奦ue3 杩?0绉嶇粍浠堕€氳鏂瑰紡銆嬨€奦ite 鎼缓 Vue2 椤圭洰锛圴ue2 + vue-router + vuex锛夈€嬸煈嶃€奵onsole.log涔熻兘鎻掑浘銆嬪鏋滄湰鏂囧鎮ㄦ湁甯姪,涔熷笇鏈涘ぇ瀹剁偣璧炲叧娉ㄦ敹钘弤杩欎釜瀵规垜寰堟湁鐢▇鐐硅禐+鍏虫敞+鏀惰棌=瀛︿範浜?/p>
