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用來訪問子元件例項,要...