vue的components：父子組件的相互通訊、非父子組件的eventBus通訊、利用本地緩存實現組件通訊、Vuex通訊

 

      做爲一個vue初學者不得不瞭解的就是組件間的數據通訊。通訊方式根據組件之間的關係有不一樣之處。組件關係有下面三種：父-->子、子-->父、非父子 基本上是這三種的模式。那麼接下來我們具體的根據這三種狀況具體的介紹經常使用的①父子組件的相互通訊②非父子組件的通訊③利用本地緩存實現組件通訊④vuex通訊：

    一，父子組件的相互通訊（直接貼代碼更加獲得快速高效）

   1.父組件向子組件傳遞數據：

      ①經過props  ：   

     建立一個prompt的子組件，用props定義接受的數據

   父組件中引用子組件prompt並給子組件傳值

在html中引用組件promptShow是屬性名必須跟子組件的同樣，

 在js中引用子組件而且動態更改數據，

 ②經過refs進行組件數據傳遞

建立子組件

 在父組件中調用子組件

html中的應用

在js中的應用，調用callMethods()方法並傳入參數：

 

 ③經過v-bind進行數據通訊

建立子組件

在父組件中應用

html中：

在js中的應用：

④$parent和$children,$root(可是這個慎用),$refs

       $parent用來引用父組件，$children返回一個子組件的數組.能夠在自組件中使用this.$parent.屬性值，或者函數;this.$children[i].屬性,訪問子組件這幾個提供了對vue組件的直接訪問，可是不推薦這麼用，會提升組件之間的耦合。好比你給$root的data一個空的vue組件XXX，能夠在兩個組件之間經過this.$root.XXX.$emit來觸發，this.$root.XXX.$on來監聽，實現組件之間的通訊。$children返回的組件順序不固定，能夠像訪問數組同樣經過下標去訪問，$refs須要提早給子組件起一個名字。能夠經過$parent訪問父組件的方法或數據。

2.子組件向父組件傳值

$emit和$on進行數據傳值

建立子組件：

在父組件中：

html中：

在js中：

 

    二，非父子組件的通訊:eventBus

 

eventBus這種通訊方式,針對的是非父子組件之間的通訊,它的原理仍是經過事件的觸發和監聽。

 

可是由於是非父子組件的關係,他們須要有一箇中間組件來鏈接。

 

我是使用的經過在根組件,也就是#app組件上定義了一個全部組件均可以訪問到的組件,具體使用方式以下

 

使用eventBus傳遞數據,咱們一共須要作3件事情

 

• 1.給app組件添加Bus屬性 (這樣全部組件均可以經過this.$root.Bus訪問到它,並且不須要引入任何文件)

• 2.在組件1裏,this.$root.Bus.$emit觸發事件

• 3.在組件2裏,this.$root.Bus.$on監聽事件

 

    三，利用本地緩存實現組件通訊：利用localStorage或者sessionStorage

             這種通訊比較簡單,缺點是數據和狀態比較混亂,不太容易維護。

            經過window.localStorage.getItem(key) 獲取數據
            經過window.localStorage.setItem(key,value) 存儲數據

            注意用JSON.parse() / JSON.stringify() 作數據格式轉換。

    四，vuex通訊

      Vuex比較複雜,暫時不作說明，後期有機會再寫一篇