99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

Vue如何在不同場景下實現(xiàn)組件間的數(shù)據(jù)交流？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司網(wǎng)絡(luò)公司擁有十余年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，上1000家客戶的共同信賴。提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)站開發(fā)、網(wǎng)站定制、買鏈接、建網(wǎng)站、網(wǎng)站搭建、響應(yīng)式網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

父子組件間的數(shù)據(jù)交流

父子組件間的數(shù)據(jù)交流可分為兩種：

1.父組件傳遞數(shù)據(jù)給子組件

2.子組件傳遞數(shù)據(jù)給父組件

父組件傳遞數(shù)據(jù)給子組件——props

這是組件數(shù)據(jù)溝通中最常見的場景：你讓父組件掌握了數(shù)據(jù)源，然后傳遞給子組件，供子組件使用

許多人會說，這很簡單！用props嘛！ 對，正因如此，它不是我要講的主要內(nèi)容，不過我們還是用代碼簡單過一遍：

父組件

子組件：

demo:

在這個demo里面，我們把“從父組件傳來的數(shù)據(jù)”這一個字符串通過props傳遞給了子組件 

如果我們希望在子組件中改變父組件的數(shù)據(jù)的話，可以在父組件中定義一個能改變父組件數(shù)據(jù)的函數(shù)，然后通過props將該函數(shù)傳遞給子組件，并在子組件在適當(dāng)時機(jī)調(diào)用該函數(shù)——從而起到在子組件中改變父組件數(shù)據(jù)的效果

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

子組件傳遞數(shù)據(jù)給父組件   方式一：回調(diào)傳參

父組件：

 #father div{
 padding: 10px;
 margin: 10px;
 border: 1px solid gray;
 }

子組件：

demo:

點(diǎn)擊前：

點(diǎn)擊后：

圖解：

點(diǎn)擊子組件（按鈕）的時候，將父組件的名稱從“A”修改為“彭湖灣的組件”

我們從父組件向子組件傳遞了一個函數(shù)（changeComponentName）。并在子組件調(diào)用這個函數(shù)的時候，以參數(shù)的形式傳遞了一個子組件內(nèi)部的數(shù)據(jù)（newComponentName）給這個函數(shù)，這樣，在父組件中定義的函數(shù)（changeComponentName）就可以取得子組件傳來的參數(shù)了 

【PS】 命名太長不好意思

子組件傳遞數(shù)據(jù)給父組件   方式二：自定義事件

父組件：

 #father div{
 padding: 10px;
 margin: 10px;
 border:1px solid grey;
 }

子組件：

 demo:

點(diǎn)擊前：

點(diǎn)擊后：

 圖解：

通過$emit(event, [...參數(shù)])，所有的參數(shù)將被傳遞給監(jiān)聽器回調(diào)，也就是我們在父組件中定義的changeComponentName方法，從而實現(xiàn)從子組件中給父組件傳參

兄弟組件間的數(shù)據(jù)交流（有共同父組件的兄弟組件）

父組件：

兄弟組件1：

兄弟組件2：

 點(diǎn)擊前：

點(diǎn)擊后：

 圖解：

如果兩個兄弟組件間存在這種數(shù)據(jù)關(guān)系的話，我們可以嘗試尋找其共同的父組件，使數(shù)據(jù)和相關(guān)方法“提升”到父組件內(nèi)部，并向下傳給兩個子組件 

這樣，其中一個子組件取得了數(shù)據(jù)，另外一個子組件取得了改變數(shù)據(jù)的方法，便可以實現(xiàn)上述的數(shù)據(jù)溝通 

【注意】這種場景存在局限性，它要求兩個組件有共同父組件。對于這種場景之外的處理方法，請看下文

全局組件間的數(shù)據(jù)交流——Vuex

我上述的許多場景里面，都運(yùn)用到了props或者函數(shù)傳參的方式去處理組件間的數(shù)據(jù)溝通。然而在稍大型的應(yīng)用里面，它們都不約而同地給我們帶來了很大的麻煩

例如：

1.通過props從父組件向子組件傳遞數(shù)據(jù)

對于直接的父子關(guān)系的組件，數(shù)據(jù)流顯得很簡潔明確，但在大型應(yīng)用里面，我們上下嵌套許多個組件的時候，這就會導(dǎo)致我們的代碼非常地繁瑣，并難以維護(hù) 

2.對于沒有共同的父組件的兄弟組件，函數(shù)傳參的數(shù)據(jù)傳遞方式也無能為力了，Vue文檔里介紹到，你可以通過以$emit和$on函數(shù)為基礎(chǔ)的“事件總線”溝通數(shù)據(jù)，但它無法應(yīng)對更加大型的應(yīng)用 

這個時候Vuex就成為了實現(xiàn)全局組件間數(shù)據(jù)交流的最佳方案了

Vuex擁有一個包含全部頂層狀態(tài)的單一數(shù)據(jù)源（state）

1.所有的組件都可以使用這個單一數(shù)據(jù)源里面的數(shù)據(jù)

2.所有的組件都可以通過派發(fā) 動作（actions）修改這個單一數(shù)據(jù)源里的數(shù)據(jù) 

原本要“走很多彎路”才能實現(xiàn)溝通的數(shù)據(jù)流，一下子就找到了最短的捷徑 

實現(xiàn)View層的數(shù)據(jù)和model層的解耦

在1,2小節(jié)中處理的數(shù)據(jù)(Vue)和第三小節(jié)中處理的數(shù)據(jù)(Vuex)，在很多時候是兩種不同類型的數(shù)據(jù)，前者是屬于View層，僅負(fù)責(zé)單純的UI展示，而model層的大多是從后端取得后注入的數(shù)據(jù)。 

一點(diǎn)建議：

1.Vue部分的代碼負(fù)責(zé)構(gòu)建View層

2.Vuex部分的代碼負(fù)責(zé)構(gòu)建model層

（上述的Vue指的是Vuex之外的框架體系）

以上述兩點(diǎn)為基礎(chǔ)，決定某部分的代碼到底要寫進(jìn)Vue里面還是寫進(jìn)Vuex里面，并盡量將兩者分開，從而實現(xiàn)View層和model層的解耦，提高前端代碼的可維護(hù)性和擴(kuò)展性

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

文章題目：Vue如何在不同場景下實現(xiàn)組件間的數(shù)據(jù)交流
標(biāo)題路徑：http://ef60e0e.cn/article/gedgge.html