angular 初探之父子元件之間傳遞資料

2022-09-03 19:27:10 字數 754 閱讀 3242

當乙個元件封裝好後,卻由於在元件裡處理過多的資料,而這些資料每個使用這個元件的人都可能不同的時候,那麼封裝就是不合理的。

所以將更多的處理和資料的呼叫給與外部是很有必要的。

vue中通過屬性和子元件事件的觸發實現父子元件之間的通訊,angular也是如此,只是寫法略有不同。

// 子元件中

// son.ts

@input() data: info = ;

@output() tabselected = new eventemitter();

handlerselected()

son.html

}

// 父元件中

// father.ts

menus: info = [

, ,

, ,

, ,

, ,

, ]; handlertest(v: info)

// father.html

對於父元件資料傳輸在子元件中使用@input() data: info接收,父元件中的html上使用[data] = menus

子元件觸發事件

// js

@output() notify = new eventemitter();

// 子元件中 html

notify me

angular6之父子元件通訊

父元件向子元件傳入資料 父元件訪問子元件的方法和資料 方法一 新增方法二 父元件ts 中呼叫子元件的方法和屬性。首先匯入模組viewchild。import from angular core 在父元件的類中將子元件作為viewchild注入到父元件中 viewchild additemcompon...

Vue元件化之父子元件

在父元件裡使用子元件時,父元件的模板最外層一定要有div塊 元件內部是無法訪問vm例項裡的data資料的,元件有自己的儲存資料的位置。元件也有data methods 生命週期函式等屬性,但data必須是乙個函式且返回的是乙個物件,物件內部儲存著資料。為什麼元件裡的data必須是函式形式?當重複使用...

Angular元件 父子元件通訊

angular元件間通訊 元件之間松耦合,元件之間知道的越少越好。元件4裡面點選按鈕,觸發元件5的初始化邏輯。傳統做法 在按鈕4的點選事件裡呼叫元件5的方法。緊密耦合。angular 在元件4根本不知道元件5存在的情況下實現。使用松耦合的方式在元件之間傳遞資料開發出高重用性的元件。使用輸入輸出屬性在...