校園的云

前言

廢話：

上篇文章寫了關于Vue 中的 props👉props，講述了概念、基本使用及注意點，在這篇文章中，我們也會用到 props和方法來讓組件之間實現通信。

---

正題：

組件是Vue中非常重要的一個概念，也是模塊化開發的基礎。在使用vue的開發過程中，每個頁面就是由多個不同的組件組合而成的。如下圖：

既然有多個組件，就必須要做到數據的動態性，也要能夠使多個組件之間能夠通信。

組件之間的通信無疑是下面幾種：

父子組件之間通信

祖孫組件之間通信（包含隔多代）

兄弟組件之間通信

本文大致舉出案例的有

props配合方法回調實現組件通信

props進行數據傳遞，自定義事件實現組件通信

我目前只學了這些哈，持續更新中，莫慌哈。

一、props配合方法回調實現組件通信

我們先初始化一個項目，之后的操作也都在這基礎上進行操作，源碼及相關項目代碼都在文末倉庫中。

刪除些沒用的，保留這些就夠了。

需求：我們需要在 HelloWorld組件中增添一個按鈕，點擊之后能夠修改父組件傳過來的值，并展示出來。

理一下思路：

首先我們不能夠直接在子組件對值進行更改，這是vue所不允許的。

那么我們真實的更改值的方法應該寫在父組件中。

最后只要做到點擊子組件按鈕，能夠調用到父組件的修改方法就算成功拉。

那么第一步，我們先在父組件中定義一個修改msg值的方法。

methods: {updateMsg () {this.msg = '大家好,我是博主寧在春'} }

定義好之后，我們該如何傳遞給子組件呢?從而讓子組件能夠調用到這個方法呢？

通過Props，在子組件中 prop是可以接收函數類型的。

那么我們就可以把我們的函數傳遞給子組件。

<!-- :msg 是傳遞給子組件的值 子組件在props 中寫什么名稱，這里就寫什么名稱 "msg" 是我們自己定義的變量 方法同樣如此 --> <HelloWorld :msg="msg" :updateMsg="updateMsg"/>

在這里寫了之后，我們還需要去子組件中接收一下：

這樣只算是接收完成了，最后要做的就是觸發他拉。我們給按鈕綁定個點擊事件就可以了。

<button @click="updateMsg">點擊修改msg的值</button>

這樣子其實也是可以實現的。

---

但是這樣局限性太大，我們平時都是要傳值的，那樣才算通信丫，我們稍微更改下。

在app組件中，我們將要接收一個值。

methods: {updateMsg (value) {this.msg = value} }

在子組件中更改如下圖：也可以實現同樣的效果

上述是實現父子組件之間通信，那么如果是兄弟組件呢?子孫組件呢？該如何呢？

因為代碼非常簡單，我不再重復操作了，做了幾張圖，幫助大家理解。

二、props搭配自定義事件實現組件通信

本文只是簡單搭配使用下，并沒有細講自定義事件哈。有需求可看👉官方文檔

說起來，這個props搭配自定義事件實現組件通信，要改動的地方蠻小哈。

1、第一步：把App組件中的綁定的方法名前的引號，改為@符號哈。

<HelloWorld :msg="msg" @updateMsg="updateMsg"/>

2、第二步：子組件也不用再在props中進行接收，另外調用父組件的方式也有一點變化。

如此也是可以實現跟第一種方式同樣的效果的。

如果是父子組件，這種方式我覺得非常方便，不用再借助props來進行接收，可直接進行綁定。

但是對于祖孫組件之間的通信，仍然是很麻煩的。得先傳遞到子組件才能再繼續傳遞給孫子組件

子組件

然后才是孫子組件

兄弟組件也是像之前差不多的，這種方式比較適用于父子組件通信，比較合適。

后語

大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

組件通信方式還在寫，挺多方式的，這只是最開始學的兩種，重頭戲還是得在后頭。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。