Element2Steps步骤栏组件源码分析（上）-组件状态初始化

姝ラ鏍忕粍浠朵粙缁峉teps鏄竴涓寜娴佺▼寮曞鐢ㄦ埛瀹屾垚浠诲姟鐨勫垎姝ュ鑸爮銆傚綋浠诲姟澶嶆潅鎴栨湁鍏堝悗鍏崇郴鏃讹紝灏嗗叾鍒嗚В涓轰竴绯诲垪姝ラ浠ョ畝鍖栦换鍔★紝鍏朵腑涓€鍗婃楠や笉灏戜簬2涓楠ゃ€傛湰鏂囧皢鍒嗘瀽鍏舵簮鐮佸疄鐜帮紝鑰愬績闃呰锛岀浉淇′細瀵逛綘鏈夋墍甯姪銆傪煍楃粍浠舵枃妗ｅ寲姝ラ馃敆gitee婧愮爜鏇村缁勪欢鍒嗘瀽璇﹁馃憠馃摎Element2婧愮爜鍒嗘瀽缁勪欢姒傝堪銆傜粍浠舵簮鐮佹楠ゆ潯鍔熻兘鎻愪緵浜嗕袱涓粍浠讹細椤跺眰缁勪欢el-steps鍜屽瓙缁勪欢el-step銆傚悇涓粍浠剁殑prop澹版槑锛屼互鍙婂悇涓睘鎬х殑鍔熻兘璇存槑鍦ㄥ畼鏂规枃妗teps#attributes涓湁璇︾粏璇存槑銆傞《绾х粍浠秙teps.vue椤剁骇缁勪欢鍩烘湰涓婃槸涓€涓鍣紝鍏朵腑鍖呭惈瀛愮粍浠秂l-step浣跨敤鐨勫叡浜姸鎬併€俥l-step涓洿鎺ラ€氳繃$parent鑾峰彇鐖跺疄渚嬶紝鏇存敼骞跺悓姝ュ叾鍏变韩鐘舵€併€傝妯℃澘鍛堢幇涓哄叿鏈夌被鍚峞l-steps鐨勭畝鍗昫iv鍏冪礌锛岃€宻teps鍏冪礌鍒欎娇鐢ㄥ尶鍚嶆彃妲藉憟鐜般€備负澶栭儴浼犻€掔殑灞炴€у０鏄庨亾鍏枫€傚睘鎬teps鐢ㄤ簬淇濆瓨褰撳墠瀹炰緥涓嬪瓙缁勪欢el-step鐨勫疄渚嬫暟缁勩€傚睘鎬tepOffset鐢ㄤ簬璁剧疆step鍏冪礌鐨勯棿闅斻€傚畾涔夌洃鍚櫒锛岀洃鍚睘鎬ctive鐢ㄤ簬瑙﹀彂鑷畾涔夊彉鍖栦簨浠讹紝鐩戝惉灞炴€teps鏇存柊姣忎釜瀛愮粍浠跺疄渚嬬殑姝ヨ繘绱㈠紩銆?/packages\steps\src\steps.vueStep缁勪欢鐘舵€佸垵濮嬪寲涓轰簡鏇村ソ鐨勭悊瑙tep缁勪欢鐨勪竴浜涚姸鎬佸垵濮嬪寲鎿嶄綔锛屼笅闈㈢粨鍚堢埗瀛愮粍浠剁殑鐢熷懡鍛ㄦ湡杩囩▼杩涜璁茶В銆傜埗瀛愮粍浠跺疄渚嬪湪鍒涘缓鏃朵細缁忚繃涓€绯诲垪鐨勫垵濮嬪寲姝ラ锛歱arentbeforeCreate->parentcreated->parentbeforeMount->childbeforeCreate->childcreated->childbeforeMount->childmounted->parentmounted銆傞鍏堬紝椤跺眰缁勪欢el-steps鍒濆鍖栧疄渚嬶紝瑙ｆ瀽props銆乨ata()銆乴istener绛夎缃€夐」銆傚叾娆★紝瀛愮粍浠秂l-step鍒濆鍖栧疄渚嬶紝瑙ｆ瀽props銆乨ata()銆佽绠楀睘鎬с€佹柟娉曞拰鐩戝惉鍣ㄧ瓑璁剧疆閫夐」銆傚畾涔変簡beforeCreate閽╁瓙鍑芥暟锛屽瓙缁勪欢瀹炰緥鍒濆鍖栧畬鎴愬悗绔嬪嵆灏嗗疄渚嬫坊鍔犲埌鐖剁粍浠剁殑灞炴€teps鏁扮粍涓€?/packages\steps\src\step.vuebeforeCreate(){this.$parent.steps.push(this);}锛屽啀娆″畾涔夋寕杞介挬瀛愬嚱鏁帮紝瀛愮粍浠秂l-step鎸傝浇鏃讹紝浣跨敤鍛戒护寮?watch()鍒涘缓鐩戝惉鍣ㄣ€傜敤浜庣洃鎺у睘鎬х储寮曠殑鍙樺寲銆傛墽琛屼竴娆＄洃鍚洖璋冨悗锛岃皟鐢ㄦ柟娉晆nwatch()灏嗗仠姝㈢洃鍚€?/packages\steps\src\step.vuedata(){return{index:-1//瀹炰緥鏁扮粍steps涓殑绱㈠紩鍊紏;},mounted(){constunwatch=this.$watch('index',val=>{//Omit...//鍋滄鐩戝惉unwatch();});}閭ｄ箞濡傛灉椤跺眰缁勪欢鐨勫睘鎬teps鏁扮粍闀垮害澶т簬0锛屽氨浼氭墽琛岀洃鍚洖璋冩洿鏂版瘡涓瓙缁勪欢瀹炰緥鐨勫睘鎬х储寮曞€硷紝鍗虫暟缁剆teps涓殑瀹炰緥绱㈠紩鍊笺€?/packages\steps\src\steps.vuewatch:{steps(steps){steps.forEach((child,index)=>{child.index=index;});}}鐒跺悗锛岃Е鍙戝瓙缁勪欢鐨刬ndex灞炴€х洃鍚洖璋冦€傛鏃朵細鍦ㄥ瓙缁勪欢涓垱寤虹洃鍚叏灞€鐘舵€乤ctive鍜宲rocessStatus鐨勭洃鍚櫒鏉ユ洿鏂板悇涓瓙缁勪欢鐨勭姸鎬佹樉绀恒€傜敤浜庤Е鍙戝洖璋冩柟娉晆pdateStatus锛屽弬鏁颁负褰撳墠婵€娲绘楠ょ殑绱㈠紩銆?/packages\steps\src\step.vueconstunwatch=this.$watch('index',val=>{this.$watch('$parent.active',this.updateStatus,{immediate:true});this.$watch('$parent.processStatus',()=>{constactiveIndex=this.$parent.active;this.updateStatus(activeIndex);},{immediate:true});//鍋滄鐩戝惉鍣╱nwatch();});鏈€鍚庢墽琛寀pdateStatus鏂规硶鍒濆鍖栧瓙缁勪欢鐨勭姸鎬併€傚洜涓哄畾涔変簡immediate:true锛屽垱寤虹洃鍚櫒鐨勬椂鍊欎細绔嬪嵆璋冪敤璇ユ柟娉曪紝鎵€浠ヨ鏂规硶浼氳璋冪敤涓ゆ銆傚瓙缁勪欢鏈変笁绉嶅唴閮ㄧ姸鎬侊紙闅愬紡锛塧ctivated/completed/inactive锛屼娇鐢ㄥ睘鎬nternalStatus鏉ヨ〃绀哄唴閮ㄧ姸鎬佸€硷紙鏄惧紡锛夈€侰ompleted褰撳墠娲诲姩姝ラ鐨勭储寮曞ぇ浜庤姝ラ鎵€鍦ㄦ暟缁勭殑绱㈠紩鍊硷紝internalStatus鐨勫€间负灞炴€inishStatus鐨勫€笺€侫ctivation褰撳墠婵€娲绘楠ょ储寮曠瓑浜庢楠ゆ墍鍦ㄦ暟缁勭殑绱㈠紩鍊笺€傚鏋滀笉鏄涓€涓厓绱狅紝鍒欏墠涓€涓猻tep鍏冪礌鐨剆tatus鍊间笉鑳戒负error锛屽嵆error浼氭墦鏂璼tep娴佺▼銆俰nternalStatus鐨勫€兼槸灞炴€rocessStatus鐨勫€笺€侼otactivated褰撳墠婵€娲荤殑stepindex灏忎簬璇tep鎵€鍦ㄦ暟缁勭殑index鍊硷紝internalStatus鍊间负wait銆傛牴鎹綋鍓嶅瓙缁勪欢鐨刬ndex锛岃幏鍙栧叾涓婁竴涓厓绱爌revChild锛岃皟鐢╬revChild鐨刾revChildcalcProgress鏂规硶璁＄畻姝ラ棿杞存牱寮忋€傝繖涓柟娉曞悗闈細璇︾粏浠嬬粛銆?/packages\steps\src\step.vueupdateStatus(val){//鑾峰彇涓婁竴姝onstprevChild=this.$parent.$children[this.index-1];if(val>this.index){//褰撳墠娲诲姩姝ョ储寮曞ぇ浜庤姝ョ储寮曞€硷紝璇ユ鐘舵€佷负瀹屾垚this.internalStatus=this.$parent.finishStatus;}elseif(val===this.index&&this.prevStatus!=='error'){//涓婁竴姝ョ姸鎬佷负'error'锛屼笅涓€姝ヤ笉浼氭縺娲籺his.internalStatus=this.$parent.processStatus;}else{//inactive鐨勭姸鎬佹槸'wait'this.internalStatus='wait';}//涓婁竴姝ユ湁杞存牱寮忚绠梚f(prevChild)prevChild.calcProgress(this.internalStatus);}锛屼笂闈㈡楠ょ殑鐘舵€佷粙缁嶄簡鏁翠釜鍒濆鍖栬繃绋嬨€備篃璁镐綘浼氱枒鎯戝姩鎬佹洿鏂扮殑灞炴€nternalStatus鍊肩殑浣滅敤鏄粈涔堬紵姝ラ缁勪欢鎻愪緵灞炴€tatus鍊兼潵璁剧疆褰撳墠姝ラ鐨勭姸鎬佸€硷紱濡傛灉鏈缃紝鐘舵€佸€煎皢鏍规嵁灞炴€nternalStatus纭畾銆傝绠楀睘鎬urrentStatus杩斿洖褰撳墠姝ラ鐨勭姸鎬佸€硷紝璁＄畻灞炴€revStatus杩斿洖涓婁竴姝ョ殑鐘舵€佸€笺€俻rops://...status:String//璁剧疆褰撳墠姝ラ鐨勭姸鎬侊紝濡傛灉涓嶈缃紝鍒欐牴鎹楠ゅ垽鏂姸鎬亇,computed:{//褰撳墠姝ラ鐨勭姸鎬乧urrentStatus(){杩斿洖姝ょ姸鎬亅|杩欎釜.internalStatus;},//涓婁竴姝ョ殑鐘舵€乸revStatus(){constprevStep=this.$parent.steps[this.index-1];杩斿洖涓婁竴姝ワ紵prevStep.currentStatus:'绛夊緟';},}馃摎Reference&RelatedReading'Lifecycle',vuejs'watch',vuejs鍏虫敞涓撴爮濡傛灉鏈枃瀵规偍鏈夊府鍔╋紝璇峰叧娉ㄢ灂锛岀偣璧烉煈嶏紝鏀惰棌猸愶紒鎮ㄧ殑璁ゅ彲鏄鎴戞渶澶х殑鏀寔锛?/p>