Vue3 - $attrs 的几种用法（1个或多个根元素、Options API 和 Composition API）
时间：2023-04-05 00:20:02
HTML5
Vue3-$attrs鐨勫嚑绉嶇敤娉曪紙涓€涓垨澶氫釜鏍瑰厓绱狅紝OptionsAPI鍜孋ompositionAPI锛夌粍浠剁殑姒傚康锛岄毦鍏嶄篃浼氭帴瑙﹀埌缁勪欢閫氫俊鐨勬蹇点€傜粍浠堕€氫俊鏈夊绉嶆柟寮忋€傛垜鍦ㄣ€奦ue3 杩?0绉嶇粍浠堕€氳鏂瑰紡銆嬩竴鏂囦腑澶ц嚧缃楀垪浜哣ue3甯哥敤鐨勭粍浠堕€氫俊鏂瑰紡銆俈ue2涓櫎浜?attrs锛岃繕鏈?listeners锛沄ue3灏?listeners鍚堝苟鍒?attrs涓€傛湰鏂囬噸鐐硅瑙ｅ浣曞湪Vue3涓娇鐢?attrs锛屾湰鏂囦娇鐢ㄧ殑Vue鐗堟湰涓?.2.25銆傛湰鏂囧叧閿瘝锛?attrs锛氬湪妯℃澘涓娇鐢紙鍗曟牴鍏冪礌鍜屽鏍瑰厓绱犵殑鎯呭喌涓嬶級useAttrs锛氬湪js涓娇鐢紙1绉峅ptionsAPI鍜?绉岰ompositionAPI鐢ㄦ硶锛塧ttrs鐨勪綔鐢ㄦ槸鍦ㄨ瑙ttrs涔嬪墠锛岄鍏堥渶瑕佺煡閬撶粍浠跺父鐢ㄧ殑閫氫俊鏂瑰紡锛歱rops鍜宔mits銆傝繖涓や釜鏄疺ue缁勪欢閫氫俊鐨勫熀纭€锛屾湰鏂囦笉鍐嶈禈杩般€傜畝鍗曠殑璇达紝attrs涓昏鏄帴鏀秔rops涓病鏈夊畾涔夛紝鑰屾槸浠庣埗缁勪欢浼犳潵鐨勫睘鎬с€備緥濡?!--鐖剁粍浠禤arentCom.vue-->{{msg}}-{{$attrs}}
鍙互鐪嬪埌鍦ㄥ瓙缁勪欢涓紝msg鏄€氳繃props鎺ユ敹鐨勶紝鎵€浠{msg}}鍙互鐩存帴杈撳嚭props鎺ユ敹鍒扮殑鍐呭銆俻rops涓病鏈夋敹鍒扮殑鍐呭鍏ㄩ儴鏀惧湪$attrs涓紝瀛樺偍鍦ㄤ竴涓璞′腑銆傛帴涓嬫潵锛屾垜浠皢瑙ｉ噴濡備綍鍦ㄤ笉鍚屾儏鍐典笅浣跨敤attrs銆倀emplate涓璦ttrs鐨勭敤娉曞湪鍓嶉潰鐨勭畝鍗曚緥瀛愪腑锛屾垜浠凡缁忕煡閬撲簡template涓璦ttrs鐨勭敤娉曘€備絾鏄疺ue3涓殑妯℃澘涓嶅啀鍙渶瑕佷竴涓牴鍏冪礌銆傛墍浠ユā鏉夸腑鏈変袱绉嶆儏鍐典娇鐢ㄤ簡attrs銆傚湪鍙湁1涓牴鍏冪礌鐨勬儏鍐典笅锛屽湪鍙湁1涓牴鍏冪礌鐨勬儏鍐典笅锛屽瓙缁勪欢涓病鏈夎props鎺ユ敹鍒扮殑灞炴€т細缁戝畾鍒版牴鍏冪礌涓娿€?!--鐖剁粍浠禤arentCom.vue-->{{msg}}
鍙互鐪嬪埌props娌℃湁鎺ユ敹鍒扮殑灞炴€х粦瀹氬埌浜嗘牴鍏冪礌涓娿€傝繛style浼犺繃鏉ョ殑鏍峰紡閮芥墽琛屼簡锛屾枃瀛楀彉绾簡銆傚鏋滄鏃舵垜浠兂鍦ㄩ〉闈笂杈撳嚭name鐨勫€硷紝鍙互鍦ㄥ瓙缁勪欢{{$attrs.name}}
浣跨敤$attrs.xxx锛屽叾涓瓁xx鏄浉搴旂殑灞炴€у悕绉般€傚綋鏈?涓牴鍏冪礌鏃讹紝褰撳瓙缁勪欢鏈?涓牴鍏冪礌鏃讹紝props鎺ユ敹涓嶅埌鐨勫睘鎬т笉浼氱粦瀹氬埌瀛愮粍浠剁殑鍏冪礌涓娿€?!--鐖剁粍浠禤arentCom.vue-->{{msg}}
{{msg}}
杩欐椂鍊欒繛鐖剁骇浼犲叆鐨勬牱寮弒tyle缁勪欢涓嶄細鐢熸晥銆傚鏋滄垜浠兂璁╃浜屼釜鍏冪礌姝ゆ椂缁戝畾鎵€鏈夋病鏈夎props鎺ユ敹鍒扮殑灞炴€э紝鎴戜滑鍙互浣跨敤v-bind="$attrs"鏂规硶鏉ュ疄鐜?!--鐖剁粍浠禤arentCom.vue-->{{msg}}
{{msg}}
娉ㄦ剰绗簩涓厓绱狅紝浣跨敤v-bind="$attrs"缁戝畾鎵€鏈塸rops娌℃湁鎺ユ敹鍒扮殑灞炴€с€傚鏋滃彧鎯崇粦瀹氫竴浜涘睘鎬э紝鍙互杩欐牱鍐?!--鐖剁粍浠朵唬鐮佽繖閲岀渷鐣?..-->
{{msg}}
{{msg}} attrs鍦╦s涓殑浣跨敤锛屼笉浠呭湪template涓彲浠ヨ闂紝鍦╦s涓篃鍙互璁块棶銆俈ue3瀹為檯涓婂吋瀹逛簡澶ч儴鍒哣ue2璇硶锛屼篃灏辨槸OptionsAPI銆侽ptionsAPI鍜孋ompositionApi涓璦ttrs鐨勭敤娉曠暐鏈変笉鍚屻€侰ompositionAPI鍒嗕负Vue3.2涔嬪墠鐨勮娉曞拰3.2涔嬪悗鐨勮娉曘€備笅闈㈠皢鍒嗗埆璁ㄨ杩欎笁绉嶆儏鍐点€侽ptionsAPI
