參考自vue.js 官方文檔

如果你使用 Vue 進行開發(fā)的話，你不得不了解的一項就是 Vue 的組件(Component)。

組件是 Vue 中一項很強大的功能，它可以擴展 Html 元素，封裝可重用代碼，減少工作量。

在使用組件開發(fā)時的一大問題就是組件之間如何進行通信？？如果組件之間不能通信的話，那么它將大大減少的開發(fā)效率以及工作樂趣。

Vue 中的組件通信分為 父子組件通信 、 兄弟組件通信 這兩大類。

父子組件通信

在 Vue 中，父子組件的關(guān)系可以理解為 props向下傳遞 、 事件向上傳遞 。

組件之間的作用域是孤立的，無法直接引用其他組件之內(nèi)的數(shù)據(jù)。

如果子組件想要使用父組件內(nèi)的數(shù)據(jù)應(yīng)該如何去做呢？？

子組件需要通過 props 來聲明預(yù)期的數(shù)據(jù)，而父組件通過直接在子組件內(nèi)傳值的方式將數(shù)據(jù)傳給子組件。

父子組件傳值

展示效果

如果你想要動態(tài)傳值，只需要使用v-bind綁定所傳的值。

動態(tài)綁定

結(jié)果同步更新

兄弟組件通信

有人可能發(fā)現(xiàn)為什么父子組件通信中只寫了父組件將數(shù)據(jù)傳遞給子組件的方法，卻沒有寫如何在子組件中將數(shù)據(jù)傳遞給父組件？？

因為在子組件中，如果想要把數(shù)據(jù)傳遞給父組件，需要用到的方法和兄弟組件通信的方法是一樣的。

這個時候就需要用到 Vue 的自定義事件 $on(eventName) 和 $emit(eventName) 來進行監(jiān)聽和觸發(fā)事件。

監(jiān)聽觸發(fā)事件