Vue元件通訊和React元件通訊的方法

2021-10-04 01:42:08 字數 1731 閱讀 5403

父子通訊

在vue中,父子通訊,就是資料存放在父元件中,然後子元件根據父元件的資料變化來變化,那麼就要想辦法將父元件的資料傳遞給子元件。在父元件中使用子元件,然後在子元件標籤上通過「 :屬性 = 『屬性值』 」來寫乙個自定義屬性,就可以將父元件的屬性傳遞給子元件,然後在子元件中通過「 props:[』屬性『] 」來接收,然後在子元件標籤內就可以直接使用屬性了,但是只能使用不能修改,這是父子通訊。

子父通訊

子父通訊就是在子元件中修改父元件的屬性,但是不能直接做修改,在vue中自己的屬性只能自己修改,所以要在父元件寫乙個修改父元件屬性的方法,然後在子元件標籤上使用自定義方法「@自定義方法名稱 = 』方法『」將父元件的方法傳遞給子元件,然後再子元件內部寫乙個自己的方法,在自己的方法內用this.$emit(『自定義方法名稱』,「引數」)來觸發父元件的方法來改變父元件的屬性。

兄弟通訊

兄弟通訊又分為兩種方法,狀態提公升,親兄弟通訊,就是將屬性放在親兄弟共同的父元件上,然後結合父子通訊和子父通訊來互相通訊。非親兄弟之間通訊主要是通過時間匯流排的方法,就是建立乙個全域性的vue空例項 let vue = new vue(),然後再其他元件內部,通過"vue.on(

′方法別

名′,「

方法」)

"將元件

內部的方

法註冊到

空例項裡

,然後再

任何元件

裡只要能

訪問到這

個空例項

,通過「

vue.

on ('方法別名',「方法」) "將元件內部的方法註冊到空例項裡,然後再任何元件裡只要能訪問到這個空例項,通過「vue.

on(′方法

別名′,

「方法」

)"將組

件內部的

方法註冊

到空例項

裡,然後

再任何組

件裡只要

能訪問到

這個空實

例,通過

「vue

.emit(『方法名』)」,就能使用空例項裡的方法。

父子通訊

在react中父子通訊跟vue有些區別,通過props傳參,在子元件標籤上通過自定義屬性「 屬性名=』『 」將值傳遞給子元件,然後在子元件內部通過 「this.props.屬性名」 來接收。

子父通訊

在父元件中寫乙個修改自己屬性的方法,然後在子元件標籤上通過自定義方法「 方法別名 = 」傳遞給字元件,在子鑽進內部也是通過「 this.props.方法別名 」來觸發方法。

ps:在react中,引用方法不能加括號,否則會自動執行,是不可控的,那麼如果想傳引數的話就要使用bind來繫結,「 this.props.方法別名.bind(null,引數1,引數2) 」

兄弟通訊

例如a元件和b元件之間要進行通訊,先找到a和b公共的父元件,a先向c元件通訊,c元件通過props和b元件通訊,此時c元件起的就是中介軟體的作用。

context是乙個全域性變數,像是乙個大容器,在任何地方都可以訪問到,我們可以把要通訊的資訊放在context上,然後在其他元件中可以隨意取到;

但是react官方不建議使用大量context,儘管他可以減少逐層傳遞,但是當元件結構複雜的時候,我們並不知道context是從**傳過來的;而且context是乙個全域性變數,全域性變數正是導致應用走向混亂的罪魁禍首.

React元件通訊 高階元件

子父元件通訊 非父子元件通訊 跨元件通訊 在react沒有類似vue中的事件匯流排來解決這個問題,我們只能借助它們共同的父級元件來實現,將非父子關係裝換成多維度的父子關係。react提供了contextapi來實現跨元件通訊,react 16.3之後的contextapi較之前的好用。使用流程 im...

react 元件通訊

父元件通過props向子元件傳遞需要的資訊 parent.jsximport react,from react import son from components test1 class parent extends component render export default parent c...

React元件通訊

分類 父子元件通訊 無論父元件傳遞是props還是state,子元件都是通過props接收 子父元件通訊 父元件傳遞方法給子元件,子元件呼叫父元件傳遞過來的方法 注意 自己的狀態自己更改 非父子元件通訊 ref鏈 1.ref this.refs.2.ref this.推薦 跨元件通訊 context...