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

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

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

父組件：

子組件：

父組件向子組件傳值方式：
1、父組件引入子組件，注冊屬性message
2、子組件通過props來獲取到注冊的屬性message

頁面顯示：

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

父組件：

子組件：

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

頁面點擊子組件按鈕可以獲得以下效果：

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

父組件：

子組件：

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

頁面效果：

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

父組件：

子組件：

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

頁面效果：

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103517.html

相關(guān)文章

Vue 組件間通信方式

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

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

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

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

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

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

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

Godtoy 2019-05-23 12:19 評論0 收藏0
Vue-組件詳解

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

dadong 2019-08-26 12:00 評論0 收藏0