angular,vue,react的父子通訊

2022-06-23 16:51:12 字數 1249 閱讀 2802

vue:

父元件: //子元件的msg屬性上加資料,datamsg是資料

子元件:export default

html:

}//在元件的html頁面進行渲染

將父元件中的資料以屬性形式放在父元件裡面的子元件上,然後子元件再在vue的例項中通過props:去得到父元件傳的資料。

react:

父元件: //子元件 傳輸的資料為datamsg 

子元件://子元件頁面上渲染

將父元件中的值放在子元件上,子元件就可以通過this.props.屬性名得到。

angular:

父元件:

js:export class father

html:

子元件:

js:引入input模組

export class child

html:}

//子元件進行頁面渲染

在父元件的類裡面吧資料寫好,然後在父元件裡面的子元件標籤上寫上動態屬性,子元件通過引入input模組,寫上@input()這個裝飾器。然後就可以得到資料。

vue:

子元件://在子元件的button按鈕上新增點選事件

export default

} methods: }}

父元件: //在父元件的子元件標籤上面新增自定義的方法

export default

} }

vue的子父通訊是通過自定義事件emit完成的。需要在子元件上新增事件,然後在事件的方法裡面建立一個自定義事件,並把資料放上去,然後在父元件裡面的子元件標籤上面使用自定義事件得到資料。

react:

使用state,將資料穿在狀態中,父元件可以通過this.state獲取到資料,而子元件也可以通過setstate設定資料。

angular:

使用emit自定義事件

子元件:

ts:匯入output和eventemitter兩個模組

export class child

}父元件:

html:

ts:export class father

}

angular中的子父通訊是通過emit自定義事件,需要引入output和eventemitter兩個模組,然後在父元件裡面講子元件繫結自定義事件。自定義事件必須要寫上$event,這是子元件的資料。

vue的prop父子元件傳值

props down events up 父元件通過 props 向下傳遞資料給子元件 子元件通過 events 給父元件傳送訊息。 靜態 props 要讓子元件使用父元件的資料,需要通過子元件的 props 選項。給 childnode 新增一個 props 選項和需要的forchildmsg資料...

vue 父子元件的傳遞 非父子元件間的傳遞

1 父元件傳遞資料給子元件 父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 這樣呢,就實現了父元件向子元件傳遞資料 2 子元件與父元件通...

angular 4 中關於父子元件傳值的示例

1home component ts 2 3import from angular core 4 5 component 10 export...