vue是資料驅動檢視更新的框架, 所以對於vue來說元件間的資料通訊非常重要，那麼元件之間如何進行資料通訊的呢？ 首先我們需要知道在vue中元件之間存在什麼樣的關係, 才更容易理解他們的通訊方式, 就好像過年回家，坐著一屋子的陌生人，相互之間怎麼稱呼，這時就需要先知道自己和他們之間是什麼樣的關係。 vue元件中關係說明:
我們歸類為：
本文會介紹元件間通訊的8種方式如下圖目錄所示:並介紹在不同的場景下如何選擇有效方式實現的元件間通訊方式，希望可以幫助小夥伴們更好理解元件間的通訊。
父元件通過props的方式向子元件傳遞資料，而通過$emit子元件可以向父元件通訊。
下面通過乙個例子說明父元件如何向子元件傳遞資料：在子元件article.vue中如何獲取父元件section.vue中的資料articles:['紅樓夢', '西遊記','三國演義']
// section父元件
複製**
// 子元件 article.vue
}
$emit我自己的理解是這樣的:$emit繫結乙個自定義事件, 當這個語句被執行時, 就會將引數arg傳遞給父元件,父元件通過v-on監聽並接收引數。 通過乙個例子，說明子元件如何向父元件傳遞資料。 在上個例子的基礎上, 點選頁面渲染出來的ariticle的item, 父元件中顯示在陣列中的下標
// 父元件中
}}
// 父元件中
} 點選改變子元件值
複製**
// 子元件中
}獲取父元件的值為: }
provide/inject是vue2.2.0新增的api, 簡單來說就是父元件中通過provide來提供變數, 然後再子元件中通過inject來注入變數。
注意: 這裡不論子元件巢狀有多深, 只要呼叫了接下來就用乙個例子來驗證上面的描述: 假設有三個元件: a.vue、b.vue、c.vue 其中 c是b的子元件，b是a的子元件inject那麼就可以注入provide中的資料，而不侷限於只能從當前父元件的props屬性中回去資料
// a.vue
複製**
// b.vue }
複製**
// c.vue
}
ref：如果在普通的 dom 元素上使用，引用指向的就是 dom 元素；如果用在子元件上，引用就指向元件例項，可以通過例項直接呼叫元件的方法或訪問資料， 我們看乙個ref來訪問元件的例子:
// 子元件 a.vue
export default
},methods:
}} 複製**
eventbus又稱為事件匯流排，在vue中可以使用它來作為溝通橋梁的概念, 就像是所有元件共用相同的事件中心，可以向該中心註冊傳送事件或接收事件， 所以元件都可以通知其他元件。
eventbus也有不方便之處, 當專案較大,就容易造成難以維護的災難在vue的專案中怎麼使用
eventbus來實現元件之間的資料通訊呢?具體通過下面幾個步驟
首先需要建立乙個事件匯流排並將其匯出, 以便其他模組可以使用或者監聽它.
// event-bus.js
import vue from 'vue'
export const eventbus = new vue()
additionnum和shownum, 這兩個元件可以是兄弟元件也可以是父子元件；這裡我們以兄弟元件為例:
複製**
// addtionnum.vue 中傳送事件
+加法器
// shownum.vue 中接收事件
計算和: }
addtionnum.vue中點選相加按鈕, 在shownum.vue中利用傳遞來的num展示求和的結果.
如果想移除事件的監聽, 可以像下面這樣操作:
import from 'event-bus.js'
eventbus.$off('addition', {})
多個檢視依賴於同一狀態和來自不同檢視的行為需要變更同一狀態的問題，將開發者的精力聚焦於資料的更新而不是資料在元件之間的傳遞上
state：用於資料的儲存，是store中的唯一資料來源
mutations：類似函式，改變state資料的唯一途徑，且不能用於處理非同步事件
actions：類似於mutation，用於提交mutation來改變狀態，而不直接變更狀態，可以包含任意非同步操作
modules：類似於命名空間，用於專案中將各個模組的狀態分開定義和操作，便於維護
// 父元件
複製**
// 子元件childa
點我讓b元件接收到資料
因為你點了b，所以我的資訊發生了變化：}
複製**
// 子元件 childb
點我讓a元件接收到資料
因為你點了a，所以我的資訊發生了變化：}
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const state =
const mutations = ,
receivebmsg(state, payload) }
export default new vuex.store()
window.localstorage.getitem(key)獲取資料 通過window.localstorage.setitem(key,value)儲存資料
注意用現在我們來討論一種情況， 我們一開始給出的元件關係圖中a元件與d元件是隔代關係， 那它們之前進行通訊有哪些方式呢？json.parse()/json.stringify()做資料格式轉換localstorage/sessionstorage可以結合vuex, 實現資料的持久儲存,同時使用vuex解決資料和狀態混亂問題.
使用props繫結來進行一級一級的資訊傳遞, 如果d元件中狀態改變需要傳遞資料給a, 使用事件系統一級級往上傳遞
使用eventbus,這種情況下還是比較適合使用, 但是碰到多人合作開發時, **維護性較低, 可讀性也低
使用vuex來進行資料管理, 但是如果僅僅是傳遞資料, 而不做中間處理,使用vuex處理感覺有點大材小用了.
在vue2.4中，為了解決該需求，引入了$attrs和$listeners， 新增了inheritattrs選項。 在版本2.4以前，預設情況下,父作用域中不作為 prop 被識別 (且獲取) 的特性繫結 (class 和 style 除外)，將會「回退」且作為普通的html特性應用在子元件的根元素上。接下來看乙個跨級通訊的例子:
// index.vue
複製**
// childcom1.vue
name: }
childcom1的$attrs: }
複製**
// childcom2.vue
age: }
childcom2: }
常見使用場景可以分為三類:
Vue元件傳參的五種方式
方法一 props傳參 父元件我是father元件 arr arr 子元件 我是son元件 方法二 事件傳遞 父元件我是father元件 子元件 我是son元件 方法三 事件監聽 父元件我是father元件 子元件 我是son元件 send1 send2 方法四 訊息發布與訂閱 安裝 pubsub ...
vue元件穿方法 Vue 元件傳參的八種方式總結
vue 元件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下元件之間的傳參還是非常有必要的 一 props 傳參 子元件定義 props 有三種方式 第一種陣列方式 props 第二種物件方式 props 第三種物件巢狀物件方式 props 複製 第三種物件預設支援 4 種...
vue 元件傳參
我們通常把路由直接對映 繫結 的元件稱為 路由元件，也只有路由元件才能直接呼叫路由有關物件 router route 當我們乙個元件即希望作為路由元件使用，又可能作為功能元件 某個頁面中的一部分 去使用，這個時候路由元件傳參的方式來做到這點 1.父元件向子元件傳遞引數 還可以傳遞函式 props 父...