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">