鑳屾櫙鎴戜滑缁忓父浼氶亣鍒拌繖鏍风殑鍦烘櫙锛氭湁鍑犱釜鍩烘湰鍔熻兘鐩稿悓鐨勭粍浠讹紝浣嗗畠浠箣闂村嵈鏈夎冻澶熷鐨勫樊寮傘€傛鏃朵綘鏉ュ埌浜嗕竴涓矓璺彛锛氭垜鏄惁灏嗗畠浠€滀竴姝ヤ竴姝モ€濆啓鍒颁笉鍚岀殑缁勪欢涓紵杩樻槸淇濈暀涓衡€滃叕鍏辩粍浠垛€濓紝鐒跺悗閫氳繃props浼犻€掑弬鏁版潵鍖哄垎涓嶅悓鐨勫姛鑳斤紵鐜板湪杩樻湁鍙﹀涓€绉嶅満鏅細鍦ㄦ煇浜涚粍浠朵腑锛堢敋鑷虫槸椤圭洰涓笌鏌愪釜鍔熻兘鐩稿叧鐨勬墍鏈夌粍浠讹級锛屾煇涓姛鑳芥槸鐩稿悓鐨勩€傚苟涓斿悗缁搷浣滈兘闇€瑕佺敤鍒拌繖涓姛鑳姐€備綘闇€瑕侀噸鏂伴€夋嫨锛屼絾杩欎竴娆℃湁涓€涓墠鎻愶細蹇呴』鏄€滃彲澶嶇敤鐨勨€濃€斺€斿叕鍏辩粍浠讹紵杩樻槸娣峰悎锛熷叾瀹炵瑪鑰呬釜浜鸿涓猴紝鍒嗕负鈥渃ss-UI澶嶇敤鈥濆拰鈥滃姛鑳藉鐢ㄢ€濅袱绉嶆柟寮忋€傚湪姝や笉鎻愩€傛湰鏂囬粯璁や负鍚庤€呫€傜幇鍦ㄥ垎鏋愪竴涓嬶細绗竴绉嶆儏鍐碉紝涓ょ瑙ｅ喅鏂规閮戒笉鏄畬缇庣殑锛氬鏋滄媶鍒嗘垚澶氫釜缁勪欢锛屼竴鏃﹀姛鑳藉彂鐢熷彉鍖栵紝灏变笉寰椾笉鍐掔潃鏇存柊鎵€鏈夌浉鍏虫枃浠朵腑浠ｇ爜鐨勯闄╋紝杩欒繚鍙嶄簡DRY鍘熷垯锛涚浉鍙嶏紝杩囧鐨刾rops浼犲€间細浣夸唬鐮佹贩涔憋紝闅句互缁存姢锛屽洟闃熼毦浠ョ悊瑙ｏ紝鏁堢巼杈冧綆銆傛湁娌℃湁鏇村ソ鐨勫姙娉曪紵鎴戜滑鍐嶆潵鐪嬬浜屼釜鍦烘櫙銆傚叾瀹炴垜浠緢娓呮鐨勭煡閬擄細杩欎釜鏃跺€欐垜浠渶瑕佺殑涓嶆槸涓€涓彲浠ヤ紶鍊肩殑缁勪欢锛岃€屾槸涓€涓被浼间簬鎻掍欢鐨刯s浠ｇ爜锛堣繖涔堢悊瑙ｅ氨鍙互浜嗭級锛佷娇鐢∕ixinsVue涓殑Mixins瀵逛簬缂栧啓鍑芥暟寮忎唬鐮佸緢鏈夌敤锛屽洜涓哄嚱鏁板紡缂栫▼灏辨槸閫氳繃鍑忓皯绉诲姩閮ㄥ垎鏉ヤ娇浠ｇ爜鏇存槗浜庣悊瑙ｃ€侻ixin鍏佽鎮ㄥ皝瑁呬竴浜涘姛鑳斤紝渚涙偍鐨勫簲鐢ㄧ▼搴忕殑鍏朵粬缁勪欢浣跨敤銆傚鏋滀娇鐢ㄥ緱褰擄紝瀹冧滑涓嶄細鏀瑰彉鍑芥暟鑼冨洿涔嬪鐨勪换浣曚笢瑗裤€傛墍浠ュ嵆浣挎墽琛屽娆★紝鍙鏄悓涓€涓緭鍏ワ紝寰楀埌鐨勫€兼€绘槸涓€鏍风殑銆俶ixin鐨勪娇鐢ㄦ柟娉曞叾瀹炴湁涓ょ鍐欐硶鈥斺€擮bject鍜孎unction銆傚畠浠兘鍙互鍦ㄥ崟涓粍浠跺唴鎴栧叏灞€寮曠敤銆備絾鏄浜巉unction褰㈠紡鐨刴ixin锛屼綔鑰呮洿鎺ㄨ崘浣滀负缁勪欢绾у埆浣跨敤锛堣€屼笉鏄叏灞€绾у埆锛夈€傚厛鐪嬬涓€绉嶅啓娉曪細鍋囪鏈変竴瀵逛笉鍚岀殑缁勪欢锛屽叾鍔熻兘鏄€氳繃鍒囨崲鐘舵€侊紙甯冨皵锛夋潵鏄剧ず鎴栭殣钘忔ā鎬佹鎴栨彁绀烘銆傝繖浜涘伐鍏锋彁绀烘鍜屾ā鎬佹闄や簡鍔熻兘鐩镐技涔嬪娌℃湁浠讳綍鍏卞悓鐐癸細澶栬涓嶅悓锛屼娇鐢ㄦ柟寮忎笉鍚岋紝浣嗛€昏緫鏄竴鏍风殑銆傝繖涓椂鍊欐垜浠彲浠ユ妸浠栦滑鍏叡鐨勯€昏緫閮ㄥ垎灏佽鎴愪竴涓猨s鏂囦欢锛?/mixins鐩綍涓嬬殑toggle.js鏂囦欢exportconsttoggle={data(){return{isShowing:false}},methods:{toggleShow(){this.isShowing=!this.isShowing;}}}涓€鑸垜浠€夋嫨鍒涘缓涓€涓笓闂ㄧ殑mixin鐩綍銆傚湪鍏朵腑鍒涘缓涓€涓墿灞曞悕涓?js鐨勬枃浠讹紝涓轰簡浣跨敤鎴戜滑闇€瑕佸鍑哄璞＄殑mixin銆?es6Modules)鐒跺悗浣跨敤mixins:[]瀵煎叆mixin鏂囦欢锛岋紙瀵煎叆鍚庯級瀵硅薄涓殑灞炴€у彲浠ョ洿鎺ヤ娇鐢紙灏卞儚寮€澶磋鐨勨€滄彃浠垛€濅竴鏍凤級锛歩mport{toggle}from'./mixins/toggle';//...constModal={template:'#modal',mixins:[toggle],//...};constTooltip={template:'#tooltip',mixins:[toggle],//...};绗簩绉嶅啓娉曪細杩欑褰㈠紡鍏跺疄鐗瑰埆閫傚悎寮€澶磋鐨勭浜岀鎯呭喌銆傚洜涓簃ixin涓殑缁勪欢鍙互鎷ユ湁瀹冨簲璇ユ嫢鏈夌殑涓€鍒囥€傝€屼笖涓婇潰涔熻浜嗭細褰撲竴涓猰ixin琚紩鍏ョ殑鏃跺€欙紝瀹冪殑鍐呴儴鍐呭鍙互鐩存帴浣跨敤鈥斺€斿叾瀹炲氨鏄悎骞跺埌寮曠敤瀹冪殑缁勪欢涓紒锛堢浉褰撲簬鐖剁粍浠剁殑鎵╁睍锛夊鏋滄垜浠畬鎴愪簡璇锋眰锛屾垜浠細鏍规嵁鏁版嵁缁欏嚭涓€涓彁绀哄拰涓€涓檷绾ф柟妗堬紙榛樿鎻愮ず锛夈€傝繖涓渶姹傚湪椤圭洰涓熀鏈笂鏄皯涓嶄簡鐨勶紝鍑虹幇涓嶆涓€娆°€備絾鏄笉寮曠敤鍏朵粬澶栭儴UI銆佷竴鑸笉鏄ā鎬佹鐨勨€滀竾鑳芥彁绀衡€濅笉閫傚悎鍏ㄥ眬鏀剧疆銆傝繖涓椂鍊欓渶瑕佹垜浠殑mixin鍑虹幇锛?/mixins鐩綍涓嬬殑index.js鏂囦欢functionformatRes(res){constdata=res.data;if(data.status.code==='浠ｈ〃浼犻€掔殑鏁板瓧'){杩斿洖鏁版嵁}else{if(鍒ゆ柇鏄惁寮曞叆鎻愮ず妗嗙粍浠?{//鎻愮ず妗嗙粍浠剁殑璋冪敤鍜屼紶閫掑弬鏁皚returndata}}varmixin=function(options){letdefaultData={}letdefaultMethods={}defaultMethods.formatRes=formatRes;return{data:function(){//杩欏皢鍑虹幇鍦ㄥ紩鐢ㄥ畠鐨勭粍浠剁殑鏁版嵁涓璻eturndefaultData;},methods:defaultMethods,//鍚屼笂锛屽彲浠ュ湪寮曠敤瀹冪殑缁勪欢涓洿鎺ヤ紶閫抰his.formatRes琚皟鐢ㄥ埌}}exportdefaultmixin鏄嚱鏁扮殑褰㈠紡锛屾墍浠ヨ鍐欏湪寮€澶村紩鐢╲ue鐨勮剼鏈細importmixinfrom'../mixin/index'constmixinCommen=mixin();//inexportdefaultWrite:mixins:[mixinCommen],use:constres=awaitthis.$http({//encapsulated璇锋眰搴搈ethod:'GET',url:'璇锋眰鍦板潃',params:{param:{}}})const{result}=this.formatRes(res)//浣跨敤mixins鍑芥暟if(result){this.areaList=result}else{//...杩斿洖false}returnt鍏抽棴锛佷竴鏂归潰锛屽閮ㄥ嚱鏁板彲浠ユ帴鏀跺弬鏁般€傚彟涓€鏂归潰锛屽湪鍑芥暟涓毚闇插璞＄殑鍐欐硶鍜寁ue缁勪欢涓殑鏁版嵁蹇呴』鏄嚱鏁扮殑鍘熷垯鏄竴鏍风殑鈥斺€旇繖鏍蜂竴涓湴鏂圭殑淇敼涓嶅奖鍝嶆暟鎹悎骞讹紝鍏朵粬鍦版柟鍐茬獊銆侻ixin涓殑鐢熷懡鍛ㄦ湡閽╁瓙涔熸槸鏈夌殑銆傚洜姝わ紝鎴戜滑鍦ㄧ粍浠朵笂搴旂敤Mixin鏃讹紝鍙兘浼氬嚭鐜癶ooks鎵ц椤哄簭鐨勯棶棰樸€傞粯璁ゆ儏鍐典笅浼氬厛娉ㄥ唽Mixin锛岀劧鍚庡啀娉ㄥ唽缁勪欢锛岃繖鏍锋垜浠氨鍙互鏍规嵁闇€瑕佸湪缁勪欢涓噸鍐橫ixin涓殑璇彞銆傜粍浠惰浜嗙畻銆傚湪vue鐨勬簮鐮佷腑锛屾垜浠彲浠ユ竻妤氱殑鐪嬪埌锛歮ergeOptions浼氶亶鍘唌ixins锛宲arent鍏堜笌mixins鍚堝苟锛屽啀涓巆hild鍚堝苟functionmergeOptions(parent,child,vm){if(child.mixins){for(vari=0,l=child.mixins.length;i{console.log('transferdata',data)this.formData.stockLimit=data;})浣犳湁娌℃湁鍙戠幇浠讳綍闄愬埗锛熶笂杩颁唬鐮佷粎閫傜敤浜庘€滀粠鍚屼竴鍒嗘敮鐨勫悗浠ｅ悜绁栧厛缁勪欢浼犻€掓暟鎹€濄€傚浣曞皢瀹冧紶閫掔粰浠讳綍缁勪欢锛熺敱浜巑ixin鐨勯檺鍒讹紝鎴戜滑鍙互鍏堟壘涓€涓猵ublic鐨勭埗缁勪欢锛屽啀鎵惧畠涓嬮潰鍏蜂綋鐨勫瓙缁勪欢锛?/鍟嗙敤鍏嶈垂锛屽彧闇€瑕佸姞涓婁笅闈㈢殑娉ㄩ噴//鏉ヨ嚜mengxiaochen@weidianfunctionbroadcast(_this=this,componentName,eventName,params){_this.$children.forEach(child=>{varname=child.$options.componentName;if(name===componentName){child.$emit.apply(child,[eventName].concat(params));}else{//console.log('child',child.$options.componentName)broadcast.apply(child,[child,componentName,eventName].concat([params]));}});}exportdefault{鏂规硶:{dispatch(componentName,eventName,params,uncle=false,childName=""){varparent=this.$parent||杩欎釜.$root;varname=parent.$options.componentName;while(parent&&(!name||name!==componentName)){parent=parent.$parent;if(parent){name=parent.$options.componentName;}}濡傛灉锛堢埗姣嶏級{if(uncle){console.log('parent',parent)broadcast(parent,childName,eventName,params);}else{parent.$emit.apply(parent,[eventName].concat(params));}}},//鐖剁粍浠跺悜瀛愮粍浠朵紶閫掓暟鎹産roadcast(componentName,eventName,params){broadcast.call(this,componentName,eventName,params);},}};閲嶅啓鐨刣ispatch鏂规硶瀹炵幇浜嗚繖涓晥鏋滐紝灏辨槸鍗曠嫭浣跨敤broadcast灏嗘暟鎹粠鐖剁粍浠朵紶閫掔粰鏌愪釜瀛愮粍浠躲€傦紒娉細浠ヤ笂鎵€璇寸殑鈥滀换鎰忊€濇槸鏍规嵁浣跨敤鏁堟灉鑰屽畾銆傚浜庡紑鍙戣繃绋嬫潵璇达紝鈥滀换鎰忊€濆氨鏄彲浠ラ殢鎰忓湪鏌愪釜缁勪欢涓彃鍏omponentName銆傛湁浜嗕笂闈㈢殑瀹炶返锛岀獊鐒惰寰楀彲浠ョ户缁畬鎴愪箣鍓嶇殑涓€涓兂璞★細鏈変竴绉嶆柟娉曞彲浠ュ湪涓嶆繁鍏ヤ笟鍔′唬鐮佺殑鎯呭喌涓嬶紝瀹屾垚浠绘剰缁勪欢鐨勮仈鍔ㄥ姛鑳姐€傚嵆锛氭暟鎹氦鎹€傞噸鍐檇ispatch鏂规硶锛?/鍟嗕笟鐢ㄩ€斿厤璐癸紝鍙渶娣诲姞浠ヤ笅娉ㄩ噴//鏉ヨ嚜mengxiaochen@weidianfunctionbroadVal(_this=this,componentName,propName){_this.$children.forEach(child=>{varname=child.$options.componentName;if(name===componentName){returnchild[propName];}else{broadVal.apply(child,[child,componentName,propName].concat([params]));}}});}exportdefault{鏂规硶锛歿focusWatchData(componentName="",childName="",propName){letparent=this.$parent||杩欎釜.$root;letname=parent.$options.componentName;濡傛灉锛坈omponentName锛墈while锛坧arent&&锛堬紒name||name锛?=componentName锛夛級{parent=parent.$parent;濡傛灉锛堢埗锛墈鍚嶇О=parent.$options.componentName;}}}else{parent=this;}濡傛灉锛堢埗姣嶏級{濡傛灉锛堬紒瀛╁瓙鍚嶅瓧锛墈杩斿洖鐖舵瘝[propName]锛泒letpropVal=broadVal(parent,childName,propName);杩斿洖鏀寔鍊硷紱}}}};focusWatchData鍑芥暟鎺ユ敹涓変釜鍙傛暟锛氱埗缁勪欢componentName锛堜负绌鸿〃绀轰粠褰撳墠缁勪欢寰€涓嬬湅锛夛紝瀛愮粍浠禼omponentName锛堜负绌鸿〃绀哄彧寰€涓婄湅锛夛紝propName锛堣鑾峰彇鐨勬暟鎹腑鐨勫睘鎬у悕锛変篃寮曞叆杩欎釜jsfile浣滀负涓€涓猰ixin杩涘叆鏌愪釜缁勪欢锛堣Е鍙戞柟锛夛紝鐒跺悗鍦ㄤ綘瑕佸叧鑱旓紙瑙﹀彂锛夌殑缁勪欢涓彃鍏omponentName濡傛灉浣犵殑param鏈夊涓€硷紝璇蜂娇鐢╟all鑰屼笉鏄痑pply锛?fontcolor=skybluesize=2>銆愭洿鏂奥?fontcolor=redsize=2>浼樺寲銆?/font>浼樺寲鏍戠粨鏋勬悳绱紝鍙互鐪嬪埌涓婇潰鐨勨€滀换鎰忕粍浠朵紶鍊尖€濆拰鈥滅埗缁勪欢鈥滅粰瀛愮粍浠朵紶鍊尖€濇槸涓€绉嶁€滈€掑綊鈥濈殑缁勪欢鍐欐硶锛岃兘浼樺寲鍚楋紵鍙兘浣犵涓€娆℃兂鍒伴€掑綊涓殑鈥滃熬閫掑綊鈥濓紝棣栧厛锛岃繖绉嶆柟寮忎笂闈㈠凡缁忕敤杩囦簡锛屽叾娆?tailrecursioncannotbeusedinjs:PropertailcallshavebeenimplementedbutnotstatecallshavebeenimplementedbutnotyetshippedgivenachangetothefeatureiscurrentlydiscussedatTC39.鈥斺€擵8寮曟搸瀹樻柟鍥㈤槦鐒跺悗浣滆€呮兂鍒颁簡钁楀悕鐨勨€滀簩鍙夋煡鎵炬爲鈥濄€嬨€傚彲鎯滄爲鐨勬煡鎵炬柟寮忎篃鏄€掑綊鐨勶紝浣嗘槸浜屽弶鏌ユ壘鏍戝湪鏍戠粨鏋勮寖鍥村唴鏁堢巼鏇撮珮銆傚伓灏旂獊鐒舵兂鍒帮紝閬嶅巻绗竴灞傜粨鏋勭殑鏃跺€欒兘涓嶈兘寰€涓嬬湅绗簩灞?濡傛灉鏈夌浜屽眰,灏嗗叾娣诲姞鍒版鍦ㄩ亶鍘嗙殑鏁扮粍涓璻sed锛岃瘯鍥句娇鏁扮粍鈥滃缁堚€濆悜涓嬮亶鍘嗭紵鏃犳硶銆傚洜涓哄湪for寰幆褰㈡垚鐨勯棴鍖呬腑锛屽紩鐢ㄥ厓绱犳槸涓嶈兘鍔ㄦ€佹敼鍙樼殑锛堣閬嶅巻鐨勫厓绱犲疄闄呬笂鏄敼鍙樹簡锛屼絾鏄亶鍘嗙殑琛屼负杩樻槸缁堟浜庡垰寮€濮嬮亶鍘嗘椂鐨勯暱搴︼級銆備负浜嗘洿濂界殑鐞嗚В锛屽彲浠ョ悊瑙ｄ负C璇█涓殑鈥滃舰寮忓弬鏁板拰瀹為檯鍙傛暟鈥濄€備絾鏄『鐫€杩欎釜鎬濊矾锛屼綔鑰呴┈涓婃兂鍒帮細鍙笉鍙互鐢ㄤ竴涓€滃ぇ鈥濈殑鏁版潵閬嶅巻锛屽緱鍒伴噷闈㈠彉鍖栧厓绱犵殑瀛愬厓绱狅細functionflag(arr){letresult=[]letoriginArr=JSON.parse(JSON.stringify(arr));for(leti=0;i<100000;i++){letitem=originArr[i];}console.log('1',item,item.childreninstanceofArray,item.children.length,originArr,originArr.length);if(item.children&&item.childreninstanceofArray&&item.children.length>0){//濡傛灉褰撳墠child涓烘暟缁勶紝涓旈暱搴﹀ぇ浜?锛屽垯鍙兘杩涘叆flag()methodoriginArr=originArr.concat(item.children);鍒犻櫎椤圭洰['children'];}result.push(item)}returnresult}鍏朵腑arr鍏锋湁浠ヤ笅缁撴瀯锛歝onstarr=[{xxx:xxx,children:[{xxx:xxx,children:[]}]},{xxx:xxx,children:[]},{xxx:xxx,瀛╁瓙浠?[]},];娌￠敊锛寁ue灏辨槸杩欎箞涓€涓煂诧紒鎴戜滑鍞竴闇€瑕佹敞鎰忕殑鏄瀹冨強鏃剁粨鏉燂紝璁╁畠缁撴潫銆傚惁鍒欙紝涓轰粈涔堣涓洪€犳垚鐨勭┖闂村拰鎬ц兘娴垂鑰屾浛鎹⑩€滈€掑綊鈥濆憿锛熶互涓婇潰鐨刡roadVal鍑芥暟涓轰緥锛屽彲浠ヨ繖鏍蜂慨鏀癸細//鍟嗕笟鐢ㄩ€斿厤璐癸紝鍙渶娣诲姞浠ヤ笅娉ㄩ噴//鏉ヨ嚜mengxiaochen@weidianfunctionbroadVal(_this=this,componentName,propName){letoriginArr=JSON.parse(JSON.stringify(_this));for(leti=0;i<100000;i++){letitem=originArr[i];}if(item.$children&&item.$childreninstanceofArray&&item.$children.length>0){//濡傛灉褰撳墠child鏄暟缁勶紝骞朵笖鍏堕暱搴﹀ぇ浜?锛屽垯鍙互杩涘叆flag()鏂规硶if(item.$options.componentName&&componentName===item.$options.componentName){returnitem[propName];}originArr=originArr.concat(item.$children);鍒犻櫎椤圭洰['children'];}}}End褰撶劧锛屼笂闈㈢殑浠ｇ爜杩樺彲浠ユ牴鎹笟鍔¤繘涓€姝ヤ紭鍖栥€傝€屽浜庢洿澶嶆潅鐨勫満鏅紝mixin鑲畾鏄笉澶熺殑銆傝繕鏄缓璁皝瑁呬竴涓交閲忕骇鐨剆tore鎴栬€呬娇鐢ㄧ涓夋柟绠€娲佺殑vuex搴撱€傞『渚胯涓€鍙ワ紝涓婇潰鏈€鍚庝竴鐐圭殑鎯虫硶鐨勫疄鐜板湪鐞嗚涓婂凡缁忚繚鑳屼簡涓€浜涒€滆璁″師鍒欌€濄€傝櫧鐒跺畠鐪熺殑濂界敤
