Vue組件通訊

我胡漢三又回來了！！！最近一直在悄咪咪的複習Vue，把文檔搞了搞，以前作過的一些東西看瞅了瞅。感受複習的差很少了，準備寫一點東西記錄一下，要不過幾天又忘了

這篇文章主要來搞一下Vue組件間的通訊，來來來，讓咱們直接上手盤一盤

首先利用Vue-Cli搭建一個項目，關於步驟在此就不詳細敘述了，在這裏咱們只關心怎麼進行組件間的傳值

先看看項目結構

　　

　　我直接在component裏面建立了兩個組件，一個爲Parent，另外一個則爲Child，咱們就以這兩個組件做爲例子，來展現一下組件間通訊

　　（爲了看起來更加直觀，下面涉及代碼的部分我將直接使用從VSCode上截下來的圖）

組件間的通訊有如下幾種

　　1.props

　　2.$emit

　　3.provide和inject

　　4.$parent和$children

　　5.Bus總線

　　6.Vuex

　　7.Vue.observable

　　其他還有一些，好比跳轉路由時傳參，用localStronge等等

 

1.props

　　用props進行組件間的通訊能夠垂手可得的實現父往子傳值

　　父組件：

　　

　　子組件：

　　

 

2.$emit

　　使用$emit觸發自定義事件，實現子向父傳值

　　父組件：

　　

　　子組件：

　　

 

3.provide和inject 

　　這對選項是一塊兒使用的。以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。組件得引入層次過多，咱們的子孫組件想要獲取祖先組件得資源，那麼怎麼辦呢，總不能一直取父級往上吧，並且這樣代碼結構容易混亂。這個就是這對選項要乾的事情。

　　provide:是一個對象，或者是一個返回對象的函數。裏面呢就包含要給子孫後代的東西，也就是屬性和屬性值。

　　inject：一個字符串數組，或者是一個對象。屬性值能夠是一個對象，包含from和default默認值。

　　父組件：

　　

　　子組件：

　　

 

4.$parent和$children

　　利用$children能夠直接獲取子組件的實例，利用$parent則能夠直接獲取到父組件的實例

　　　父組件獲取子組件的屬性：

　　

　　子組件獲取父組件的屬性：

　　

 

5.bus總線

　即中央事件總線的方式。新建一個Vue事件bus對象，而後經過bus.$emit觸發事件，bus.$on監聽觸發的事件。

　先建立Bus.js

　　

　每一個組件使用前先引入Bus總線，而後用$on定義事件，$emit觸發事件

　　

　　

 

6.Vuex

　　vue的狀態管理工具，用法：https://vuex.vuejs.org/zh/

 

7.Vue.observable

　　能夠用做簡單場景的最小跨組件狀態存儲

　　 建立store.js

　　

　　應用組件

　　

　　測試組件

　　

 

暫時就總結了以上這些，溜了溜了，去複習別的了

 

原文出處：https://www.cnblogs.com/suihang/p/11218012.html