Vue全家桶组件化开发
时间：2023-04-02 23:40:31
HTML
浣滆€厊鏉版柉鍏嬫．鎺橀噾|https://juejin.im/user/5a16e1...瀛︿範缁勪欢鍖栧紑鍙戯紝棣栧厛鎺屾彙缁勪欢鍖栧紑鍙戞€濇兂銆佺粍浠舵敞鍐屾柟寮忋€佺粍浠舵暟鎹氦浜掓柟寮忋€佺粍浠舵Ы鐨勪娇鐢ㄣ€佺粍浠舵Ы鐨勪娇鐢╲ue璋冭瘯宸ュ叿锛岀粍浠跺疄鐜颁笟鍔￠€昏緫鍔熻兘鐨勬柟寮忋€傜粍浠跺紑鍙戞€濊矾锛岀粍浠舵敞鍐岋紝缁勪欢璋冭瘯锛岀粍浠堕棿鏁版嵁浜や簰锛岀粍浠舵Ы缁勪欢鍖栬鑼冿紝澶嶇敤鍏ㄥ眬缁勪欢娉ㄥ唽璇硶鏈夊绉嶅彲鑳絍ue.component(缁勪欢鍚?{data:缁勪欢鏁版嵁,template:缁勪欢妯℃澘鍐呭})//瀹氫箟涓€涓悕涓篵utton-counter鐨勬柊缁勪欢Vue.component('button-counter',{data:function(){return{count:0}},template:'鐐瑰嚮{{count}}娆?/button>})缁勪欢浣跨敤
Vue.component('button-counter',{data:function(){return{count:0}},template:'鐐瑰嚮{{count}}'鏂规硶锛歿handle:function(){this.count+=2;}}})varvm=newVue({el:'#app',data:{}});娉ㄥ唽缁勪欢鏃讹紝data蹇呴』鏄嚱鏁帮紝缁勪欢妯℃澘鐨勫唴瀹瑰繀椤绘槸鍗曟牴鍏冪礌妯℃澘锛歚鐐瑰嚮{{count}}娆?/button>
`銆佺粍浠跺懡鍚嶆柟寮?/鐭í绾挎柟寮廣ue.component('my-component',{/*...*/})//椹煎嘲鏂瑰紡Vue.component('鎴戠殑缁勪欢',{/*...*/}}閮ㄥ垎缁勪欢娉ㄥ唽varComponentA={/*...*/}varComponentB={/*...*/}varComponentC={/*...*/}newVue({el:'#app',components:{'component-a':ComponentA,'component-b':ComponentB,'component-c':ComponentC,}})vue璋冭瘯宸ュ叿鐨勪娇鐢ㄧ‘淇濅綘浣跨敤鐨勬槸Node6+鍜孨PM3+鍏嬮殕杩欎釜reponpm瀹夎锛堝鏋滀綘浣跨敤yarn浣滀负鍖呯鐞嗗櫒锛屽垯瀹夎yarn锛塶pmrunbulid鎵撳紑Chrome鎵╁睍椤甸潰妫€鏌モ€滃紑鍙戣€呮ā寮忊€濈偣鍑烩€滃姞杞借В鍘嬬殑鎵╁睍鈥濓紝鐒跺悗閫夋嫨shells/chrome.HackingClone杩欎釜reponpminstallnpmrundev鍦╨ocalhost:8100浼氬緱鍒颁竴涓甫娴嬭瘯app鐨勬櫘閫歴hell銆傚畨瑁呰皟璇曞伐鍏风涓€姝ュ厠闅嗕粨搴擄紝绗簩姝ュ畨瑁呬緷璧栧寘锛岀涓夋鏋勫缓锛岀鍥涙锛屾墦寮€Chrome鎵╁睍椤甸潰锛岀浜旀锛岄€夋嫨寮€鍙戣€呮ā寮忥紝绗叚姝ワ紝鍔犺浇瑙ｅ帇鍚庣殑鎵╁睍锛岄€夋嫨shells/chrome缁勪欢闂存暟鎹氦浜掔埗缁勪欢浼犲€肩粰瀛愮粍浠剁粍浠堕€氳繃props鎺ユ敹浼犲€糣ue.component('dada-item',{props:['title'],//鐢ㄤ簬鎺ユ敹鐢眛heparentcomponenttemplate:'{{title}}
'})鐖剁粍浠堕€氳繃灞炴€?dada-itemtitle="Datafromtheparentcomponent">//闈欐€?dada-item:title="title">//鍔ㄦ€佸睘鎬х粦瀹氫唬鐮佺ず渚嬶細//鐖剁粍浠朵紶鍊肩粰瀛愮粍浠禫ue.component('dada-item',{//瀛愮粍浠舵帴鏀剁埗缁勪欢//title灞炴€rops:['title'],data:function(){return{msg:'瀛愮粍浠剁殑鏁版嵁'}},template:'{{msg+"..."+title}}
'});varvm=newVue({el:'#app',data:{pmsg:'鐖剁粍浠朵腑鐨勫唴瀹?,ptitle:'dynamic',}});props灞炴€у悕绉扮殑瑙勫垯鏄湪props褰㈠紡涓娇鐢ㄩ┘宄板紡澶у皬鍐欙紝鎮ㄩ渶瑕佸湪妯℃澘涓娇鐢ㄧ牬鎶樺彿銆傚瓧绗︿覆褰㈠紡鐨勬ā鏉挎病鏈夎繖鏍风殑闄愬埗銆俈ue.component('dada-item',{//JavaScript涓殑hump-styleprops:['daTitle'],template:'{{title}}
'})//杩欐槸涓€涓畝鐭殑html涓殑姘村钩绾?dada-itemda-title="dada">{{pmsg}}
//鐖剁粍浠朵紶鍊肩粰瀛愮粍浠?灞炴€у悕Vue.component('third-com',{props:['testTitle'],template:'
{{testTitle}}
'});Vue.component('menu-item',{props:['menuTitle'],template:'
{{menuTitle}}
'});props灞炴€у€肩被鍨媠tring绫诲瀷string鍊肩被鍨媙umberboolean绫诲瀷booleanarray绫诲瀷arrayobjectobject//string褰㈠紡pstr">
//鏁板瓧浼犲€?dada-item:pstr='pstr':pN='11'>//鐖剁粍浠朵紶鍊肩粰瀛愮粍浠?props灞炴€у悕typeVue.component('dada-item',{props:['pstr','pN'],template:`{{pstr}}
{{pN}}
`});varvm=newVue({el:'#app',data:{pmsg:'鐖剁粍浠?pstr:'dada'}});瀛愮粍浠朵紶鍊肩粰鐖剁粍浠?dada-item:parr="parr">//瀛愮粍浠朵紶鍊肩粰鐖剁粍浠禫ue.component('dada-item',{props:['parr'],妯℃澘锛歚
`});varvm=newVue({el:'#app',data:{pmsg:'鐖剁粍浠?,parr:['da1','da2','da3']}}];瀛愮粍浠朵紶鍊肩粰鐖剁粍浠剁粍浠讹紝瀛愮粍浠堕€氳繃鑷畾涔変簨浠跺悜鐖剁粍浠朵紶閫掍俊鎭?buttonv-on:click='$emit("eventname",value)'>dada鐖剁粍浠剁洃鍚瓙缁勪欢浜嬩欢
闈炵埗瀛愮粍浠朵紶鍊煎厔寮熺粍浠堕棿浜や簰varevent=newVue()浜嬩欢涓績鐩戝惉浜嬩欢鍜屼簨浠堕攢姣佷簨浠?$on('鑷畾涔変簨浠跺悕绉?,eventfunction)鐩戝惉浜嬩欢锛岀涓€涓弬鏁颁负鑷畾涔夌洃鍚簨浠剁殑鍚嶇О锛岀浜屼釜涓轰簨浠跺嚱鏁癳vent.$off('鑷繁瀹氫箟浜嬩欢鐨勫悕绉?)//destroy浜嬩欢瑙﹀彂浜嬩欢event.$emit('鑷畾涔変簨浠跺悕绉?,id)mounted:function(){//鐩戝惉浜嬩欢eventhub.$on('da1',(val)=>{this.num+=val;});}mounted:function(){//鐩戝惉浜嬩欢eventhub.$on('da2',(val)=>{this.num+=val;});}Componentslot鐖剁粍浠朵紶鏁版嵁缁欏瓙缁勪欢锛岀埗缁勪欢浼犳暟鎹粰瀛愮粍浠?/鐖剁粍浠?dada-item>dada杩欓噷鐨刣ada娌℃湁slot鏄棤娉曟樉绀虹殑//瀛愮粍浠秙lot鐨勪綅缃?slot>slot浣嶄簬瀛愮粍浠剁殑妯℃澘涓?/slot鐨勪綅缃甐ue.component('dada-box',{template:`da
//鏄剧ず浣嶇疆