Angular 子父元件傳值與通訊

2021-09-14 05:04:28 字數 1097 閱讀 1964

一、父元件給子元件傳值-@input

父元件不僅可以給子元件傳遞簡單的資料,還可以將自己的方法以及整個父元件傳給子元件

1.父元件呼叫子元件的時候傳入資料

2.子元件引入input模組

import from '@anjular/core';
3.子元件中@input接受父元件出過來的資料

export class headercomponent implements oninit

ngoninit()

}

4.子元件中使用父元件的資料

二、子元件@output觸發父元件的方法

1.子元件引入output和eventemitter

import  from '@angular/core';
2.子元件中例項化eventemitter

@output() private outer=new eventemitter();
3.子元件通過eventemitter物件outer例項廣播資料

sendparent()
4.父元件呼叫子元件時,定義接受事件,outer就是子元件的eventemitter物件

5.父元件接收到資料會呼叫自己的runparent方法,並拿到子元件的資料

runparent(msg:string)
三、父元件通過@viewchild主動獲取子元件的資料和方法

1.呼叫子元件給子元件定義乙個名稱

2.引入viewchild

import  from '@angular/core';
3.viewchild和子元件關聯

@viewchild('footerchild') footer
4.呼叫子元件

run()

子元件傳值給父元件

原理 在父元件引用子元件時,通過事件繫結機制把乙個方法aaaa的引用傳給子元件,這個方法中可以有各種引數,子元件在觸發自己的函式或者某些資料發生變化時,觸發 事件繫結機制繫結的函式,通過引數的方式將要傳的值傳過來,父元件中處理,也就接到了子元件的值 最開始父元件本身有乙個方法 fathermetho...

子元件向父元件傳值

子向父傳值 子元件像父元件傳值的本質就是,父向子傳遞方法,子呼叫這個方法,同時把 資料當作引數 傳遞給這個方法 父元件 goodsinfo.vue 子元件 goodsinfo numbox.vue 1.goodsinfo.vue 操作 1.匯入子元件 import numbox from compo...

Vue 父元件與子元件的傳值

建立 vue 例項,得到 viewmodel 建立的第一種方式 使用 vue.extend 來建立全域性的vue元件 varcom1 vue.extend vue.component mycom1 com1 varvm new vue methods components template 注意 元...