vue父子組件數(shù)據(jù)傳輸以及實現(xiàn)父子組件數(shù)據(jù)雙向綁定

1.父傳子掌腰,子接受用props

? a.父組件中要做的事情

? ? ? 在父組件中引入子組件:

并在components中聲明該組件

b.子組件中要做的事情

? ? ?在子組件中props的方式接受齿梁,這里有兩種方法:props:['rules','model'],還有就是圖片中對象的方式芦拿,只是對象的方式能夠設(shè)定傳值的類型。

在子組件中的使用如第二個紅色的標出的部分酵幕,直接使用? this.rules

2.子傳父缓苛,子用$emit(派發(fā)自定義事件)

父子組件間傳值是單向數(shù)據(jù)流,即父傳子笔刹,但是子不能修改被傳過來的數(shù)值,如果子要修改還需通知父組件來修改(目前學(xué)到的內(nèi)容來說是這樣的)冬耿,所以父傳子的時候,是傳遞事件日月,并在父組件中調(diào)用該函數(shù)

a.父組件要做的

在父組件中引入子組件缤骨,如圖所示


第二幅圖绊起,即為綁定的事件傳參即為子傳給父的數(shù)據(jù)

b.子組件

3.父子組件數(shù)據(jù)的雙向綁定

在子中改父中也可以檢測到,就像v-model一樣栅表,(v-model是value="inputvalue" @input="inputHandler"封裝的語法糖)

在子組件中的設(shè)置:


此處的 :value="inputvalue" @input="inputHandler" 就是實現(xiàn)與父組件雙向綁定的關(guān)鍵

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谨读,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子铐尚,更是在濱河造成了極大的恐慌,老刑警劉巖宣增,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件爹脾,死亡現(xiàn)場離奇詭異灵妨,居然都是意外死亡,警方通過查閱死者的電腦和手機泌霍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門朱转,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人怪与,你說我怎么就攤上這事分别×裕” “怎么了?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵煌往,是天一觀的道長。 經(jīng)常有香客問我羞海,道長曲管,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任腊徙,我火速辦了婚禮檬某,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘民傻。我一直安慰自己场斑,他們只是感情好,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布喧半。 她就那樣靜靜地躺著薯酝,像睡著了一般爽柒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上浩村,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天心墅,我揣著相機與錄音怎燥,去河邊找鬼。 笑死策肝,一個胖子當著我的面吹牛肛捍,可吹牛的內(nèi)容都是我干的拙毫。 我是一名探鬼主播缀蹄,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼膘婶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了诡延?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤古胆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后筛璧,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體逸绎,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年夭谤,在試婚紗的時候發(fā)現(xiàn)自己被綠了棺牧。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡朗儒,死狀恐怖颊乘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情醉锄,我是刑警寧澤乏悄,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站恳不,受9級特大地震影響檩小,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜阻肿,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望姨伤。 院中可真熱鬧,春花似錦当编、人聲如沸忿偷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽贮喧。三九已至箱沦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間寒跳,已是汗流浹背冯袍。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留征冷,地道東北人肴捉。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像窃页,于是被迫代替她去往敵國和親脖卖。 傳聞我的和親對象是個殘疾皇子畦木,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

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

  • 組件(Component)是Vue.js最核心的功能唇礁,也是整個架構(gòu)設(shè)計最精彩的地方,當然也是最難掌握的妒蛇。...
    六個周閱讀 5,614評論 0 32
  • 前言 您將在本文當中了解到,往網(wǎng)頁中添加數(shù)據(jù),從傳統(tǒng)的dom操作過渡到數(shù)據(jù)層操作,實現(xiàn)同一個目標,兩種不同的方式....
    itclanCoder閱讀 25,806評論 1 12
  • Vue父子組件之間的傳遞數(shù)據(jù)和方法調(diào)用 概述 在一個良好定義的接口中盡可能將父子組件解耦是很重要的奋蔚,因此組件實例的...
    埃的騷幾里閱讀 3,348評論 0 3
  • 此文基于官方文檔毯欣,里面部分例子有改動酗钞,加上了一些自己的理解 什么是組件? 組件(Component)是 Vue.j...
    陸志均閱讀 3,828評論 5 14
  • 9.1 什么是組件? 組件(Component)是 Vue.js 最強大的功能之一领猾。組件可以擴展 HTML 元素,...
    白水螺絲閱讀 776評論 0 2