淺談react和Vue傳值問題
React的傳值問題
一、 父元件傳值到子元件
主要通過react的狀態和屬性,在父元件中渲染子元件,然後給父元件中渲染的子元件自定義新增屬性,利用狀態的設定,把父元件的資料賦給子元件的屬性,當做子元件的屬性值,接著在子元件中通過props獲取屬性的屬性值,實現父元件資料流向子元件。
二、 子元件傳值到父元件
主要通過react的狀態和屬性,在父元件中渲染子元件,然後給父元件中渲染的子元件自定義新增屬性,屬性值是一個函式,函式的形參即為子元件傳遞的資料,在子元件中,通過獲取屬性的屬性值(屬性值即為函式,給函式傳遞一個實參—即子元件的資料),實現子元件資料流向父元件。
Vue的傳值問題
一、父元件--子元件傳值
主要通過props屬性
Template 標籤內 給子元件設定屬性
<!--父親元件給子元件傳資料-->
<v-nav :msg=“msg” :n=“name”></v-nav>
在子元件的components設定
props:[‘msg’,‘n’], /*子元件接收資料*/
子元件的template內通過{{}}直接繫結資料即可
二、子元件--父元件傳值
主要通過$emit推送事件
<v-child @to-parent="getData"></v-child>
this.$emit('to-parent'
getData(msg){
//msg==this.ipt 子元件
this.str=msg
}
三、 非父子元件之間傳值
空vue物件$emit(‘ ’,資料) 傳送 $on 接收
父元件操作子元件---$refs $parent 子元件操作父元件資料
使用$refs獲取dom 在mounted函式中
/*nextTick裡面的程式碼會在DOM更新後執行*/---mounted函式中執行
$nextTick this.$nextTick(function(){ })
使用slot釋出內容
Slot標籤新增屬性 <slotname="ul-slot">