VUE如何利用自定義的事件,在子組件中修改父組件里邊的值鳍鸵?

關鍵點記孜辍:三個事件名字

步驟如下:

這里,相對本案例偿乖,父組件定義為Second-module击罪,對應的子組件是Three-module

第一步:你要想改動父組件的值,你父組件得先有值讓你改吧贪薪!所以媳禁,

  在父組件定義值:

image

第二步:同樣的,二者之間咋就成了父子關系了呢画切?你得讓一個組件里邊裝另一個組件吧竣稽,所以

  在父組件Second-module中調用、注冊霍弹、引用進來子組件Three-module:

調用:

image

注冊:

image

引用:

image

第三步:父組件定義公用值毫别,就是為了讓子組件用的,你得把值給了子組件吧典格!不要小氣:

找到二者的契合點(組件引用處)岛宦,用bind 把值綁給他。

image

第四步:父組件扔過來了耍缴,子組件要接住啊砾肺,接不住掉地上摔爛了你還雜用齐佳!

image

第五步:子組件你把值拿過來了,就要使用父組件的值吧债沮,不用就放爛了炼吴。不用你接他干哈!

image

好了疫衩,轉折點到了硅蹦,接下就是主題了:改動值。

第六步:子組件你拿到值用著不爽闷煤,首先要設置一個開關(click事件)啟動“申請改動父組件值”的程序吧

image

第七步:在這個程序中童芹,$emit ****啟動計劃:你要自己找一個壯士(自定義事件名,可以想象成荊軻)鲤拿,好交代讓它出征去改動父組件的值假褪,并讓他帶上一個參數(就是要把父組件的值改成啥,荊軻手里拿的那個包著小匕首的地圖??近顷,)生音,讓他去帶話 ,既出使秦國(父組件內部)將燕王(子組件)的旨意傳遞給父元素(秦大王)窒升。

image

emit英語中是發(fā)射的意思缀遍,就是讓這個自定義事件發(fā)射、出發(fā)饱须、出征的意思(歡送壯士荊軻是發(fā)生在橋上域醇,changeTitle函數就是那個橋,燕王在橋上使用$emit發(fā)令蓉媳,讓自定義事件(軻軻)去執(zhí)行改動父元素值(改變秦王老大的想法譬挚,比如不揍燕國,到項目中就是改變付元素中某個狀態(tài)值等)的偉大壯舉酪呻。他是一個使者减宣,是鏈接子組件改動父組件值的橋梁。

第八步:自定義事件來到父組件中(秦王)号杠,找到和他同名的事件(也就是荊軻刺秦時蚪腋,接待荊軻的秦國大臣本人了丰歌!姨蟋,他起著在父組件中用于監(jiān)聽自定義事件的一個作用,時刻準備去火車站接荊軻然后宣荊軻覲見立帖。眼溶。這個事件是綁定在 要求改動值的子組件 標簽-燕國在秦國的大使館 上的)。

自定義事件和他的對接人(同名事件)交接晓勇,同名事件執(zhí)行早在這里準備好的另一個父組件里邊的函數A堂飞,并且把自定義事件從子組件中帶來的參數轉交接灌旧,給了這個函數A的$event(固定名字,不能改)參數绰筛。

image

第九步:因為同名事件在子組件中被觸發(fā)了枢泰,所以他就會執(zhí)行他后邊定義的函數,函數被執(zhí)行后铝噩,這個函數就帶著參數“南下”衡蚂,去父組件的methods找他自己,并執(zhí)行函數內部的邏輯骏庸。

image

第十步:深明大義的父組件毛甲,早在methods中定義好了要修改的邏輯,將要修改的值等于函數帶來的參數值(也就是自定義事件捎來的子組件中定義的值)

image
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末具被,一起剝皮案震驚了整個濱河市玻募,隨后出現的幾起案子,更是在濱河造成了極大的恐慌一姿,老刑警劉巖七咧,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異叮叹,居然都是意外死亡坑雅,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門衬横,熙熙樓的掌柜王于貴愁眉苦臉地迎上來裹粤,“玉大人,你說我怎么就攤上這事蜂林∫K撸” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵噪叙,是天一觀的道長矮锈。 經常有香客問我,道長睁蕾,這世上最難降的妖魔是什么苞笨? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮子眶,結果婚禮上瀑凝,老公的妹妹穿的比我還像新娘。我一直安慰自己臭杰,他們只是感情好粤咪,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著渴杆,像睡著了一般寥枝。 火紅的嫁衣襯著肌膚如雪宪塔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天囊拜,我揣著相機與錄音某筐,去河邊找鬼。 笑死冠跷,一個胖子當著我的面吹牛来吩,可吹牛的內容都是我干的。 我是一名探鬼主播蔽莱,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼弟疆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了盗冷?” 一聲冷哼從身側響起怠苔,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎仪糖,沒想到半個月后柑司,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡锅劝,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年攒驰,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片故爵。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡玻粪,死狀恐怖,靈堂內的尸體忽然破棺而出诬垂,到底是詐尸還是另有隱情劲室,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布结窘,位于F島的核電站很洋,受9級特大地震影響,放射性物質發(fā)生泄漏隧枫。R本人自食惡果不足惜喉磁,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望官脓。 院中可真熱鬧协怒,春花似錦、人聲如沸确买。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽湾趾。三九已至芭商,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間搀缠,已是汗流浹背铛楣。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留艺普,地道東北人簸州。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像歧譬,于是被迫代替她去往敵國和親岸浑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內容