03-vue組件傳值

基于現(xiàn)在都是模塊化開發(fā)旋奢,vue開發(fā)過程中組件之間傳值是必不可少的至朗,常用的vue的組件傳值分為三種方式:父?jìng)髯泳缃⒆觽鞲盖乱⒎歉缸咏M件傳值辛蚊。

一、父組件給子組件傳值----通過屬性

1.子組件需要做的事:

(1)創(chuàng)建一個(gè)子組件
(2)寫好子組件中自己的邏輯
(3)通過 props:[父組件傳值的key] 來接收父組件傳遞的值
props可接收對(duì)象(屬性為傳遞的值初澎,屬性值為規(guī)定傳遞值的數(shù)據(jù)類型)虑凛、數(shù)組格式的值

2.父組件需要做的事:

(1)導(dǎo)入子組件

import subimagesilder from '../subcomponent/subimagesilder.vue';

(2)注冊(cè)子組件

  components:{
     subimagesilder 
  }

(3)在<template></template>中使用子組件

<subimagesilder :imageList="imageList"></subimagesilder>

注意:imageList是父組件給子組件傳遞的值
形式:<子組件對(duì)象 :父組件傳值的key=值></子組件對(duì)象>

二、子組件給父組件傳值----通過觸發(fā)自定義事件

1.子組件需要做的事:

(1)寫好子組件自己的代碼
(2)在需要傳值給父組件數(shù)據(jù)的地方定義并調(diào)用key事件

this.$emit(key,值)

key表示自定義事件名延柠,值表示要傳遞的值
這里表示會(huì)觸發(fā)key事件
注意,這個(gè)key等下在父組件中要使用到

2.父組件需要做的事:

(1)導(dǎo)入子組件
(2)在components中注冊(cè)子組件
(3)在<template></template>中使用子組件
(4)在子組件的標(biāo)簽中,注冊(cè)(綁定)key事件發(fā)生時(shí)執(zhí)行的函數(shù)名稱锣披,例如:

 <subnumber v-on:key='函數(shù)名稱'></subnumber>

(5)在父組件的methods中,寫好接收子組件傳過來的值的函數(shù)即可,例如:

    methods:{
        函數(shù)名稱(子組件傳遞過來的值){
            xxxxxx
        }
    }

子組件負(fù)責(zé)觸發(fā)key事件增热,父組件負(fù)責(zé)注冊(cè)key事件

三胧辽、非父子組件之間傳遞值----通過Bus/總線/發(fā)布訂閱模式/觀察者模式(4種叫法)

1.創(chuàng)建一個(gè)公共的vue實(shí)例

  • 方式1:創(chuàng)建一個(gè)公共的vue實(shí)例(在js中),并且導(dǎo)出邑商,在傳值和接收值的兩方都引入這個(gè)js
  • 方式2:Vue.prototype.bus = new Vue();
    表示先在Vue的原型上添加bus屬性凡蚜,值為Vue的一個(gè)實(shí)例x吭从。之后創(chuàng)建的Vue實(shí)例中都帶有bus屬性,并且bus屬性值都指向Vue實(shí)例x

2.在傳值的組件中,調(diào)用公共的vue實(shí)例芹务。

通過 vue實(shí)例.$emit() 傳值鸭廷。傳值方觸發(fā)自定義事件

3.在接收的組件中,調(diào)用公共的Vue實(shí)例。

通過 Vue實(shí)例.$on() 接收辆床。接收方注冊(cè)自定義事件

注意:觸發(fā)和監(jiān)聽兩個(gè)操作必須在公共的vue實(shí)例中進(jìn)行傳值和接收值

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末讼载,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子咨堤,更是在濱河造成了極大的恐慌,老刑警劉巖驱还,帶你破解...
    沈念sama閱讀 221,198評(píng)論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凸克,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡萎战,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門戳粒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來虫啥,“玉大人,你說我怎么就攤上這事≌沟伲” “怎么了苔咪?”我有些...
    開封第一講書人閱讀 167,643評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵团赏,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我舔清,道長(zhǎng)曲初,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,495評(píng)論 1 296
  • 正文 為了忘掉前任抒痒,我火速辦了婚禮颁褂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘颁独。我一直安慰自己,他們只是感情好誓酒,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評(píng)論 6 397
  • 文/花漫 我一把揭開白布丰捷。 她就那樣靜靜地躺著,像睡著了一般病往。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上耍攘,一...
    開封第一講書人閱讀 52,156評(píng)論 1 308
  • 那天畔勤,我揣著相機(jī)與錄音,去河邊找鬼庆揪。 笑死,一個(gè)胖子當(dāng)著我的面吹牛吝羞,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播钧排,決...
    沈念sama閱讀 40,743評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼恨溜,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了糟袁?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,659評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤五嫂,失蹤者是張志新(化名)和其女友劉穎肯尺,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體则吟,經(jīng)...
    沈念sama閱讀 46,200評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡氓仲,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了敬扛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,424評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡谍珊,死狀恐怖急侥,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情贝润,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評(píng)論 5 349
  • 正文 年R本政府宣布打掘,位于F島的核電站,受9級(jí)特大地震影響唯绍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜枝誊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評(píng)論 3 333
  • 文/蒙蒙 一惜纸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧祠够,春花似錦粪牲、人聲如沸古瓤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)绎速。三九已至焙蚓,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間购公,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評(píng)論 1 271
  • 我被黑心中介騙來泰國(guó)打工知残, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绘闷,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,798評(píng)論 3 376
  • 正文 我出身青樓印蔗,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親吧趣。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • VUE介紹 Vue的特點(diǎn)構(gòu)建用戶界面岔霸,只關(guān)注View層簡(jiǎn)單易學(xué)俯渤,簡(jiǎn)潔呆细、輕量八匠、快速漸進(jìn)式框架 框架VS庫(kù)庫(kù),是一封裝...
    多多醬_DuoDuo_閱讀 2,717評(píng)論 1 17
  • 前言 在vue項(xiàng)目中坑夯,不可避免的會(huì)在不同組件之間進(jìn)行傳值 抡四,不同需求下有各式各樣的傳值方式。就比如說指巡,兄弟組件傳值...
    喜歡未來你的我閱讀 1,382評(píng)論 2 12
  • vue的生命周期/鉤子函數(shù) 對(duì)于實(shí)現(xiàn)頁(yè)面邏輯交互等效果,我們必須知曉vue的生命周期鳖谈,才能愉快的玩耍,知...
    han2019閱讀 1,803評(píng)論 0 0
  • 除了今天的太陽(yáng)阔涉,什么事情都不要放在心上 學(xué)會(huì)收斂自己的光芒和鋒芒,當(dāng)然贯要,如果你能以合適的姿態(tài)鶴立雞群,那就一次成功...
    周璐璐_cc1d閱讀 275評(píng)論 0 0
  • 天河一捧注清江崇渗, 福澤萬(wàn)里潤(rùn)群芳京郑。 北出三峽激還蕩, 南入洞庭瘋且狂些举。 扶風(fēng)飲月恣歡暢, 踏雪尋梅戲流香户魏。 更喜船...
    琦人閱讀 619評(píng)論 10 18