React 快速上手 2 元件通訊

2022-03-11 00:38:29 字數 693 閱讀 6344

父元件可以通過設定子元件的props屬性進行向子元件傳值,同時也可以傳遞乙個**函式,來獲取到子元件內部的資料。

效果演示

子元件是輸入框,父元件及時獲取到輸入框內容然後更新右邊標籤。

父元件傳遞**函式

父元件傳遞乙個方法,即updatespan,用於更新span內容。

class father extends react.component

}/**

* 更新span中的內容

* @param txt

*/updatespan(txt))

}render())}

}

子元件繫結事件

子元件繫結onchange觸發事件txtchange,當內容發生改變txtchange會設定state,同時通過訪問prop.onchangehandle呼叫了父元件的updatespan方法,此時引數值即資料就被父元件獲取到。

class son extends react.component

}render()

txtchange(event)

)this.props.onchangehandle(event.target.value);}}

react(二) 元件的通訊

對於元件來說,通訊無非兩種,父子元件通訊,和非父子元件通訊 一 父子父子元件通訊 1 父元件給子元件傳值 對於父元件來說,props是他們之間的媒介 class parent extends component componentdidmount 1000 render class child 1 ...

React學習(四)元件

元件 上面 中,變數 hellomessage 就是乙個元件類。模板插入 時,會自動生成 hellomessage 的乙個例項 下文的 元件 都指元件類的例項 所有元件類都必須有自己的 render 方法,用於輸出元件。注意,元件類的第乙個字母必須大寫,否則會報錯,比如hellomessage不能寫...

VUE 元件(二)元件通訊

元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時,就要用到自定義事件 子元件用 emit 來觸發事件,父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果,在改變元件data中的count後,通過 emit 將值傳給父元件,父元件用v o...