「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信
校園的云
前言
廢話：
上篇文章寫了關(guān)于Vue 中的 props👉props，講述了概念、基本使用及注意點，在這篇文章中，我們也會用到 props和方法來讓組件之間實現(xiàn)通信。
正題：
組件是Vue中非常重要的一個概念，也是模塊化開發(fā)的基礎(chǔ)。在使用vue的開發(fā)過程中，每個頁面就是由多個不同的組件組合而成的。如下圖：
既然有多個組件，就必須要做到數(shù)據(jù)的動態(tài)性，也要能夠使多個組件之間能夠通信。
組件之間的通信無疑是下面幾種：
本文大致舉出案例的有
我目前只學(xué)了這些哈，持續(xù)更新中，莫慌哈。
一、props配合方法回調(diào)實現(xiàn)組件通信
我們先初始化一個項目，之后的操作也都在這基礎(chǔ)上進行操作，源碼及相關(guān)項目代碼都在文末倉庫中。
刪除些沒用的，保留這些就夠了。
需求：我們需要在 HelloWorld組件中增添一個按鈕，點擊之后能夠修改父組件傳過來的值，并展示出來。
理一下思路：
那么第一步，我們先在父組件中定義一個修改msg值的方法。
methods: {updateMsg () {this.msg = '大家好,我是博主寧在春'} }定義好之后，我們該如何傳遞給子組件呢?從而讓子組件能夠調(diào)用到這個方法呢？
通過Props，在子組件中 prop是可以接收函數(shù)類型的。
那么我們就可以把我們的函數(shù)傳遞給子組件。
<!-- :msg 是傳遞給子組件的值 子組件在props 中寫什么名稱，這里就寫什么名稱 "msg" 是我們自己定義的變量 方法同樣如此 --> <HelloWorld :msg="msg" :updateMsg="updateMsg"/>在這里寫了之后，我們還需要去子組件中接收一下：
這樣只算是接收完成了，最后要做的就是觸發(fā)他拉。我們給按鈕綁定個點擊事件就可以了。
<button @click="updateMsg">點擊修改msg的值</button>這樣子其實也是可以實現(xiàn)的。
但是這樣局限性太大，我們平時都是要傳值的，那樣才算通信丫，我們稍微更改下。
在app組件中，我們將要接收一個值。
methods: {updateMsg (value) {this.msg = value} }在子組件中更改如下圖：也可以實現(xiàn)同樣的效果
上述是實現(xiàn)父子組件之間通信，那么如果是兄弟組件呢?子孫組件呢？該如何呢？
因為代碼非常簡單，我不再重復(fù)操作了，做了幾張圖，幫助大家理解。
二、props搭配自定義事件實現(xiàn)組件通信
本文只是簡單搭配使用下，并沒有細講自定義事件哈。有需求可看👉官方文檔
說起來，這個props搭配自定義事件實現(xiàn)組件通信，要改動的地方蠻小哈。
1、第一步：把App組件中的綁定的方法名前的引號，改為@符號哈。
<HelloWorld :msg="msg" @updateMsg="updateMsg"/>2、第二步：子組件也不用再在props中進行接收，另外調(diào)用父組件的方式也有一點變化。
如此也是可以實現(xiàn)跟第一種方式同樣的效果的。
如果是父子組件，這種方式我覺得非常方便，不用再借助props來進行接收，可直接進行綁定。
但是對于祖孫組件之間的通信，仍然是很麻煩的。得先傳遞到子組件才能再繼續(xù)傳遞給孫子組件
子組件
然后才是孫子組件
兄弟組件也是像之前差不多的，這種方式比較適用于父子組件通信，比較合適。
后語
大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。
紙上得來終覺淺，絕知此事要躬行。
大家好，我是博主寧在春：主頁
一名喜歡文藝卻踏上編程這條道路的小青年。
希望：我們，待別日相見時，都已有所成。
組件通信方式還在寫，挺多方式的，這只是最開始學(xué)的兩種，重頭戲還是得在后頭。
總結(jié)
以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 「后端小伙伴来学前端了」关于 Vue中的
- 下一篇： 「后端小伙伴来学前端了」Vue中Prop