關鍵點記孜辍:三個事件名字
步驟如下:
這里,相對本案例偿乖,父組件定義為Second-module击罪,對應的子組件是Three-module
第一步:你要想改動父組件的值,你父組件得先有值讓你改吧贪薪!所以媳禁,
在父組件定義值:
第二步:同樣的,二者之間咋就成了父子關系了呢画切?你得讓一個組件里邊裝另一個組件吧竣稽,所以
在父組件Second-module中調用、注冊霍弹、引用進來子組件Three-module:
調用:
注冊:
引用:
第三步:父組件定義公用值毫别,就是為了讓子組件用的,你得把值給了子組件吧典格!不要小氣:
找到二者的契合點(組件引用處)岛宦,用bind 把值綁給他。
第四步:父組件扔過來了耍缴,子組件要接住啊砾肺,接不住掉地上摔爛了你還雜用齐佳!
第五步:子組件你把值拿過來了,就要使用父組件的值吧债沮,不用就放爛了炼吴。不用你接他干哈!
好了疫衩,轉折點到了硅蹦,接下就是主題了:改動值。
第六步:子組件你拿到值用著不爽闷煤,首先要設置一個開關(click事件)啟動“申請改動父組件值”的程序吧
第七步:在這個程序中童芹,$emit ****啟動計劃:你要自己找一個壯士(自定義事件名,可以想象成荊軻)鲤拿,好交代讓它出征去改動父組件的值假褪,并讓他帶上一個參數(就是要把父組件的值改成啥,荊軻手里拿的那個包著小匕首的地圖??近顷,)生音,讓他去帶話 ,既出使秦國(父組件內部)將燕王(子組件)的旨意傳遞給父元素(秦大王)窒升。
emit英語中是發(fā)射的意思缀遍,就是讓這個自定義事件發(fā)射、出發(fā)饱须、出征的意思(歡送壯士荊軻是發(fā)生在橋上域醇,changeTitle函數就是那個橋,燕王在橋上使用$emit發(fā)令蓉媳,讓自定義事件(軻軻)去執(zhí)行改動父元素值(改變秦王老大的想法譬挚,比如不揍燕國,到項目中就是改變付元素中某個狀態(tài)值等)的偉大壯舉酪呻。他是一個使者减宣,是鏈接子組件改動父組件值的橋梁。
第八步:自定義事件來到父組件中(秦王)号杠,找到和他同名的事件(也就是荊軻刺秦時蚪腋,接待荊軻的秦國大臣本人了丰歌!姨蟋,他起著在父組件中用于監(jiān)聽自定義事件的一個作用,時刻準備去火車站接荊軻然后宣荊軻覲見立帖。眼溶。這個事件是綁定在 要求改動值的子組件 標簽-燕國在秦國的大使館 上的)。
自定義事件和他的對接人(同名事件)交接晓勇,同名事件執(zhí)行早在這里準備好的另一個父組件里邊的函數A堂飞,并且把自定義事件從子組件中帶來的參數轉交接灌旧,給了這個函數A的$event(固定名字,不能改)參數绰筛。
第九步:因為同名事件在子組件中被觸發(fā)了枢泰,所以他就會執(zhí)行他后邊定義的函數,函數被執(zhí)行后铝噩,這個函數就帶著參數“南下”衡蚂,去父組件的methods找他自己,并執(zhí)行函數內部的邏輯骏庸。
第十步:深明大義的父組件毛甲,早在methods中定義好了要修改的邏輯,將要修改的值等于函數帶來的參數值(也就是自定義事件捎來的子組件中定義的值)