🖥? 前端經典面試題專欄：前端經典面試題?Vue組件間的通信方式
🧑?💼 個人簡介：一個不甘平庸的平凡人🍬

? 個人主頁：CoderHing的個人主頁

🍀 格言: ?? 路漫漫其修遠兮,吾將上下而求索??

👉 你的一鍵三連是我更新的最大動力??

---

目錄

一、回答點

二、深入回答

props/$emit

父組件向子組件傳值

eventBus 事件總線($emit/$on)

依賴注入Provide / inject

ref/$refs

$parent/ $children

$attrs/$listeners

三、總結及歸納

父子組件的通信

兄弟組件的通信

任意組件之間

---

一、回答點

普遍的 說 三四個即可 父/子 props/emit eventBus??provide/ inject 等..

二、深入回答

props/$emit

? ? ? ? 簡述: 父組件通過 props 向子組件傳遞數據,子組件通過 $emit 和父組件通信

• 父組件向子組件傳值

  • props 只能由父組件對子組件進行傳值, 使得父子組件之間形成一個單向綁定.子組件的數據會隨著父組件不斷的更新
  • props 可以定義一個以上(包括一個)的數據,對于子組件接收的數據,可以是各種數據類型,也可以傳遞一個函數
  • 代碼展示

<!-- 父組件 --> <template><div class="father"><son :msg="msg" :fn="fatherFunction" /></div> </template><script> import son from './sons.vue' export default {name: 'FatherPage',components: {son},data() {return {msg: '父組件數據'}},methods: {fatherFunction() {console.log('fatherPage')}} } </script> <!-- 子組件 --> <template><div class="son"><p>父組件傳遞過來的值:{{ msg }}</p><button @click="fn">按鈕</button></div> </template><script>export default {name: 'Son',props: ['msg', 'fn'] } </script>

• 子組件向父組件傳值
  • $emit 綁定一個自定義事件,當這個事件被觸發時會將參數傳遞給父組件 而父組件通過 v-on 或語法糖(@) 監聽并接收參數
  • 代碼展示

<!-- 父組件 --> <template><div class="father"><son @clickSon="clickSonMsg" /></div> </template><script> import son from './sons.vue' export default {name: 'FatherPage',components: {son},methods: {clickSonMsg() {console.log('子組件傳遞過來點擊信息')}} } </script> <!-- 子組件 --> <template><div class="son"><button @click="sonClick">告訴父親被打了!</button></div> </template><script>export default {name: 'SonPage',methods: {sonClick() {this.$emit('clickSonMsg')}} } </script>

eventBus 事件總線($emit/$on)

? ? ? ? 簡述:eventBus事件總線 適合 父子組件|非父子組件等之間的通信,使用步驟如下:

• 創建事件中心管理組件之間的通信
• 發送事件
• 接收事件

依賴注入Provide / inject

? ? ? ? 簡述: Vue中的依賴注入,用于 父子組件之間通信,也可用于 祖孫組件之間的通信,在層級很深的情況下,使用這種方式進行傳值.

provide / inject 是Vue提供的兩個鉤子函數 和 data methods 是同級的 并且 provide書寫跟data是一樣的.

• provide 是用來發送數據/方法
• inject 用來接收數據/方法
• 需要注意的是 依賴注入提供的屬性 都 不是響應式的
• 代碼展示

// 在父組件中:provide() {return {num: this.num}}// 在子組件中:inject: ['num']

ref/$refs

? ? ? ? 簡述:也是實現 父子組件 之間的通信

• ref:用在子組件上,它的引用指向了子組件的實例. 可以通過實例來訪問組件的數據和方法..

$parent/ $children

• $parent 可以讓組件訪問父組件的實例(上一級組件的屬性和方法)
• $children 可以讓組件訪問子組件的實例,注: 它并不能保證 子組件的順序,并且訪問的數據 不是響應式數據

$attrs/$listeners

? ? ? ? 簡述: Vue引入了它們兩個 可以實現 跨組件跨代通信

• $attrs: 繼承所有的父組件屬性(除了prop傳遞的屬性 class style),常用于 子組件的元素上
• $listeners: 它是一個對象,包含了 作用在這個組件上的所有監聽器,配合v-on=$listeners,將所有的事件監聽器指向這個組件的某個特定的元素.

三、總結及歸納

父子組件的通信

• 子組件通過 props 來接收父組件傳遞過來的數據, 父組件在子組件上 注冊監聽事件,子組件通過 $emit觸發事件 向 父組件發送數據.
• 通過ref屬性給子組件設置名字,父組件通過$refs=組件名來獲取子組件實例,子組件通過$parent獲得父組件,這樣也可以實現通信.
• 使用provide/inject , 在父組件中 通過 provide提供變量, 子組件中通過inject將變量注入到組件中,不論層級有多深,只要調用了inject 就可以注入 provide中的數據

兄弟組件的通信

• eventBus方法,它本質是通過 創建一個空的Vue實例來作為消息傳遞的對象, 通信組件 引入這個實例,通過這個實例來監聽和觸發時間,實現傳遞
• 通過$parent/$refs 來獲取到兄弟組件 也可以進行通信

任意組件之間

• 還是通過eventBus來實現,他創建了一個 中心點 可以用它來傳遞事件和接收

總結

以上是生活随笔為你收集整理的前端经典面试题 | Vue组件间的通信方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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