組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系：

組件之間的關(guān)系

如上圖所示，A 和 B、B 和 C、B 和 D 都是父子關(guān)系，C 和 D 是兄弟關(guān)系，A 和 C 是隔代關(guān)系(可能隔多代)。

針對(duì)不同的使用場(chǎng)景，如何選擇行之有效的通信方式？這是我們所要探討的主題。本文總結(jié)了vue組件間通信的幾種方式，如props、$emit、bus等。

父組件向子組件傳值

父?jìng)髯?#xff1a;props

{{staticMes}}

{{dynamicMes}}

子組件向父組件傳值(通過事件形式)

2、子傳父：事件

• 子組件觸發(fā)[$emit]事件,把數(shù)據(jù)作為參數(shù)帶上
• 父組件監(jiān)聽事件,并獲取參數(shù)[數(shù)據(jù)]

{{total}}

兄弟組件：通過共同的父組件搭橋

通過共同的父組件，用事件把數(shù)據(jù)傳給父組件，再由父組件傳給子組件

子組件A的數(shù)據(jù)：{{childAMes}}

把子組件的數(shù)據(jù)穿個(gè)父組件 復(fù)制代碼

來自子ChildA的數(shù)據(jù)：{{childAMesShowInChildB}}

復(fù)制代碼

事件總線:Bus

創(chuàng)建一個(gè)Bus類[Vue.prototype.$bus = new Vue()]負(fù)責(zé)事件派發(fā)、監(jiān)聽和回調(diào)管理

總結(jié)

以上是生活随笔為你收集整理的laydate组件 无法传值_Vue组件通信的几种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。