欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue組件通信的多種方法詳解

 更新時(shí)間：2021年11月16日 08:41:00   作者：RxinY924  
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

說起組件通信，可能大家耳熟能詳?shù)挠幸韵?種：

1. 父傳子

父組件通過自定義屬性給子組件傳值，子組件用props接收

2. 子傳父

父組件在子組件標(biāo)簽上自定義事件，子組件通過$emit來觸發(fā)自定義事件，并且可以傳遞參數(shù)

3. 非父子組件傳值

eventBus事件總線：

可通過eventBus進(jìn)行信息的發(fā)布與訂閱（創(chuàng)造一個(gè)都能訪問到的事件總線）

在這里插入圖片描述

4. vuex

vuex是專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，它采用集中式存儲(chǔ)管理程序的所有組件的狀態(tài)，解決多組件通信。不過多用于中大型項(xiàng)目，小型項(xiàng)目用它會(huì)顯得臃腫。

5. refs

通過添加ref和·$refs·配合，也可以很方便的獲取子組件，訪問調(diào)用子組件的屬性和方法
關(guān)于refs，我還另外單獨(dú)寫過一篇詳細(xì)用法的，refs的用法

除開以上5種，還有5種不那么常見的組件通信方法：

6. $children

父組件中·$children·返回的是一個(gè)組件集合，如果清楚知道子組件的順序，也可以使用下標(biāo)操作

在這里插入圖片描述

7. $parent

子組件中this.$parent指向父組件，子組件無法直接修改父組件中的數(shù)據(jù)，可以通過this.$parent讓父組件自己去改

例如：

this.$parent.xxx=200

this.$parent.fn()

8. provide & inject

成對出現(xiàn)：provide和inject是成對出現(xiàn)的

作用：用于父組件向子孫組件傳遞數(shù)據(jù)

使用方法：

  • provide在父組件中，返回要傳給下級的數(shù)據(jù)
  • inject在需要使用這個(gè)數(shù)據(jù)的子孫組件中注入數(shù)據(jù)。（不論組件層次有多深）

在這里插入圖片描述 

9. $attrs

用于父組件給孫組件傳遞數(shù)據(jù)

10. $listeners

用于孫組件給父組件傳遞數(shù)據(jù)

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評論