vue和react關於父子元件傳值的區別

2022-08-10 20:54:15 字數 1615 閱讀 1005

vue

父元件向子元件傳值:props傳值

//

父元件import son from './son.vue';

export

default

, data()

}}父元件

//子元件 title是傳遞給子元件的屬性名,msg是傳遞給子元件的值

//子元件

}

子元件向父元件傳值:方法

//

父元件父元件

// @後跟的為子元件呼叫父元件的方法名changedata, changefn為父元件中定義的方法

//子元件

子元件}

點選傳送值給父元件

父元件獲取子元件的資料: ref(不需要通過事件)

//

父元件this.$refs.soncomponent.msg //

獲取屬性值 msg為屬性名

this.$refs.soncomponent.fn //

獲取方法 fn為方法名

//子元件

子元件獲取父元件的資料和方法: parent(不需要事件)

react

子元件獲取父元件的屬性和方法

this.props.name   //

獲取屬性值

this.props.fn //

呼叫父元件方法

context 在元件樹間進行資料傳遞: 設計目的是為了共享那些對於乙個元件樹而言是「全域性」的資料

* 避免通過中間元素傳遞props

//

context.js 建立乙個context物件

import react from 'react'let =react.createcontext();

export

//父元件 將父元件的返回值使用provider包裹,並傳入value屬性

import react, from 'react';

state =

//點讚功能

increment = () =>)

}render() }> /* **** */

this.state.users} showcomment= removebyid= addcomment=>

this.addcomment}>

獲得的贊數量

/* **** */

); } } export 

//子元件

import react, from 'react'import from '../context'...

export

default

class listitem extends component = this

.props;

return

(

/* *** */

}>贊

...

}}

/* *** */

) }

}

先這樣,待理解補充

關於React 中父子元件通訊

目錄 目錄 一 父元件與子元件通訊 1.父元件給子元件傳值 2.父元件給子元件傳方法 3.父元件給子元件傳自己本身的元件 4.父元件獲取子元件的資料 二 子元件對父元件值型別的設定 三 通過context傳遞 定義步驟 使用 1.在呼叫子元件的時候定義乙個屬性 2.子元件裡面 this.props....

react父子元件通訊

父元件通過props向子元件傳值,子元件通過再constructor中props中獲取父元件的值,如果子元件要修改父元件的值,再子元件中通過this.state 來存下父元件的值,再通過this.setsate 來修改state,如果需要再把值傳給父元件,則通過,方法來實現 在父元件呼叫子元件的時候...

VUE父子元件

父頁面 actiondetail msg 子頁面呼叫父頁面的方法 this.emit parentaction 我想說的話 我是父元件 我是子元件 父元件對我說 父元件通過 prop 給子元件下發資料,子元件通過 emit觸發事件給父元件傳送訊息 1.this.children用來訪問子元件例項,要...