子 父元件的資料傳遞 理解篇

2022-07-17 07:06:08 字數 1227 閱讀 4320

元件之間是需要通訊的,可以理解為子元件是乙個空殼,而呼叫子元件的父元件賦予了它靈魂。

業務邏輯舉栗:

使用select 元件 父元件需要往子元件傳入資料表示使用哪些select 資料.如 --父傳子

當選擇重慶後子元件需要返回給父元件乙個value-->cq --子傳父

//

父傳子理解:父元件使用v-bind 動態繫結事件並傳入引數,子元件使用props 獲取引數並使用

實現如下:

父傳子:props 這個屬性進行傳遞 :可陣列,可物件。

陣列:props:['某引數']

物件:可規定型別 如

/*子傳父理解:子元件繫結事件並註冊乙個自定義指令並傳入引數,然後在父元件呼叫的子元件中

使用註冊的自定義指令,再觸發方法獲取回傳的引數。

*/實現如下:

第一步:

this.$emit('child-to-far',"hello"); 註冊自定義事件並傳入引數

第二步:

引入元件在父元件呼叫自定義的指令

第三步:在父元件的 methods 中 增加getsomething (msg)

另一種父傳子的方式:

業務舉例:子元件是乙個dialog 而父元件需要往dialog 裡傳入一些html **是子元件在不同的地方顯示的dialog 呈現不同。

如果父元件需要往子元件內傳入模板(html)而非資料.可以使用

-----父元件**

---子元件**。

以上兩段**表示 父元件定義solt屬性為header 子元件使用solt 標籤屬性name的值 與父元件solt 的值對應

這樣可以知道父元件想寫入子元件的什麼位置

動態元件 :is 

業務場景:當父元件中可能使用子元件a也可能使用子元件b,兩者相互切換的時候就可以用。

使用理解:使用 :is繫結乙個引數,然後將引數賦予元件名稱,然後在方法中改變該引數為另乙個元件

實現:  模板裡定義

然後在data 中去定義這個  curr='coma' 然後方法中去改變該curr   

props 從父元件傳入的資料是單向資料流 在子元件內的改變是不會對父元件進行作用的。//2018-04-22 mack 後面理解

VUE子元件向父元件的資料傳遞

我們知道,父元件使用 prop 傳遞資料給子元件。但子元件怎麼跟父元件通訊呢?這個時候 vue 的自定義事件系統就派得上用場了。使用 繫結自定義事件v on 每個 vue 例項都實現了事件介面,即 使用 on eventname 監聽事件 使用 emit eventname 觸發事件 vue 的事件...

vue父元件與子元件之間的資料傳遞

父元件向子元件傳遞資料 父元件用資料繫結 子元件用props接收 template div model son datas fatherdata model son div template script import modelson from views test test vue model ...

React 資料傳遞(子傳父)

import react,from react import reactdom from react dom class parenetcom extends react.component console.log parent.console.log this.props render doset...