父子元件通訊 attrs

前言：父子元件通訊一般都使用的是props,但是隨著元件巢狀的複雜，props使用起來也許過於繁瑣，下面介紹下$attrs 的使用方法。

包含了父作用域中不作為 prop 被識別 (且獲取) 的特性繫結 (class 和 style 除外)。當乙個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部元件——在建立高階別的元件時非常有用。

首先，在a元件中，在b元件上加入乙個屬性isreadonly

b:isreadonly=

"true"
/>

其次，在b元件中,在c元件上新增v-bind="$attrs"

c      v-bind=

"$attrs"
v-on=
"$listeners"
/>

最後，在c元件中使用this.$attrs.isreadonly獲取傳入的引數

console.

log(
this
.$attrs.isreadonly)
// true

$attrs 可以很方便的做到屬性透傳，使用起來也比較簡單，避免了多寫 props

的痛苦。面試的時候也經常會問到父子元件通訊的方式有哪些，那麼 props 和 $attrs 都是可以的。

父子元件通訊

子元件向父元件傳遞this emit 子元件向父元件傳遞事件並攜帶引數子元件 向父元件傳遞事件todetail並傳遞引數res this emit todetail res 父元件 監聽事件並輸出引數 todetails child comp 父元件呼叫子元件中方法 ref 用於給元素 子元件註冊引...

父子元件通訊

父元件 子元件 通過props properties縮寫 通訊 兩種方式 陣列和物件 常用物件方式 test cmovies movies cnt div comc v for item in cmovies li ul div template src js vue.js script 子元件 c...

Angular元件 父子元件通訊

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