vue父組件和子組件數(shù)據(jù)傳遞

forrest23 發(fā)布于2019-08-23 16:55 / 3704人閱讀

1、父組件向子組件傳遞數(shù)據(jù)

父組件：

子組件：

父組件向子組件傳值方式：
1、父組件引入子組件，注冊(cè)屬性message
2、子組件通過(guò)props來(lái)獲取到注冊(cè)的屬性message

頁(yè)面顯示：

2、子組件觸發(fā)事件向父組件傳遞數(shù)據(jù)

父組件：

子組件：

子組件向父組件傳值方式：
1、父組件注冊(cè)事件event
2、子組件由transmit事件方法，通過(guò)$emit("", data)向父組件傳值

頁(yè)面點(diǎn)擊子組件按鈕可以獲得以下效果：

3、父組件直接調(diào)取子組件數(shù)據(jù)

父組件：

子組件：

父組件直接獲取子組件數(shù)據(jù)：
1、父組件引入子組件，添加ref屬性
說(shuō)明：ref 被用來(lái)給DOM元素或子組件注冊(cè)引用信息。引用信息會(huì)根據(jù)父組件的 $refs 對(duì)象進(jìn)行注冊(cè)。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子組件上，引用信息就是組件實(shí)例
注意：只要想要在Vue中直接操作DOM元素，就必須用ref屬性進(jìn)行注冊(cè)
2、父組件直接通過(guò) this.$refs.child.屬性獲取數(shù)據(jù)
說(shuō)明：在父組件里面通過(guò)以下方式獲取子組件的屬性和方法
this.$refs.child.屬性
this.$refs.child.方法

頁(yè)面效果：

4、子組件直接調(diào)取父組件數(shù)據(jù)

父組件：

子組件：

父組件直接獲取子組件數(shù)據(jù)：
1、父組件引入子組件
2、子組件直接通過(guò) this.$parent.屬性獲取數(shù)據(jù)
說(shuō)明：在子組件里面通過(guò)以下方式獲取子組件的屬性和方法
this.$parent.屬性
this.$parent.方法

頁(yè)面效果：

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103517.html

相關(guān)文章

Vue 組件間通信方式

摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過(guò)向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。例子是在 jsrun.net 平臺(tái)編寫，不支持移動(dòng)端平臺(tái)，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...

hss01248 2019-08-26 13:54 評(píng)論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問(wèn)指定名稱的子組件。學(xué)習(xí)筆記：組件詳解組件詳解組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

jeffrey_up 2019-08-23 16:02 評(píng)論0 收藏0
Vue中父子組件生命周期執(zhí)行順序初探

摘要：結(jié)論父子組件生命周期鉤子的執(zhí)行順序遵循從外到內(nèi)，然后再?gòu)膬?nèi)到外，不管嵌套幾層深，也遵循這個(gè)規(guī)律。組件化的設(shè)計(jì)思路大抵相同，中父子組件生命周期鉤子執(zhí)行順序，具體沒(méi)做探究，但是值得一提的是父組件的也是晚于子組件執(zhí)行的。如今前端框架都流行組件化，頁(yè)面元素都可以使用組件進(jìn)行高度概括，那么處理組件之間的關(guān)系就如同處理頁(yè)面架構(gòu)一樣重要。正確理解組件之間的關(guān)系，才能讓代碼按照我們與預(yù)料方式工作。最...

Yumenokanata 2019-08-23 10:41 評(píng)論0 收藏0
7個(gè)有用的Vue開發(fā)技巧

摘要：另外需要說(shuō)明的是，這里只是凍結(jié)了的值，引用不會(huì)被凍結(jié)，當(dāng)我們需要數(shù)據(jù)的時(shí)候，我們可以重新給賦值。1 狀態(tài)共享隨著組件的細(xì)化，就會(huì)遇到多組件狀態(tài)共享的情況，Vuex當(dāng)然可以解決這類問(wèn)題，不過(guò)就像Vuex官方文檔所說(shuō)的，如果應(yīng)用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是vue.js 2.6新增加的Observable API ，通過(guò)使用這個(gè)api我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)...

Godtoy 2019-05-23 12:19 評(píng)論0 收藏0
Vue-組件詳解

摘要：除了監(jiān)聽(tīng)事件外，還可以用于組件之間的自定義事件。它僅僅作為一個(gè)直接訪問(wèn)子組件的應(yīng)急方案，應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用。將和合并成，會(huì)自動(dòng)去判斷是普通標(biāo)簽還是組件。子組件這里的狀態(tài)綁定的是父組件的數(shù)據(jù)。查看原文站點(diǎn)，更多擴(kuò)展內(nèi)容及更佳閱讀體驗(yàn)！組件詳解組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。全局注冊(cè) Vue.component(my-com...

dadong 2019-08-26 12:00 評(píng)論0 收藏0