【每日一學】父組件如何獲取子組件的數據

① 先說,父組件如何主動獲取子組件的數據?

方案1:

$children

$children用來訪問子組件實例,要知道一個組件的子組件可能是不唯一的,所以它的返回值是數組。

缺點:

無法確定子組件的順序,也不是響應式的。如果你確切的知道要訪問子組件建議使用$refs。

方案2 : $refs


②子組件如何主動獲取父組件中的數據?


通過 : $parent


$parent用來訪問父組件實例,通常父組件都是唯一確定的,跟$children類似

this.$parent.屬性

this.$parent.方法


父子組件通信除了以上三種,還有props 和$emit 這兩種比較常用就不介紹了,除此之外,還有inheritAttrs和 $attrs


除了以上,provide / inject 也適用於 隔代組件通信,尤其是獲取祖先組件的數據,非常方便


簡單的說,當組件的引入層次過多,我們的子孫組件想要獲取祖先組件的資源,那麼怎麼辦呢,總不能一直取父級往上吧,而且這樣代碼結構容易混亂。這個就是provide / inject要乾的事情。


在這裡我們在父組件中provide for這個變量,然後直接設置三個組件(childOne、childTwo 、childThird)並且一層層不斷內嵌其中, 而在最深層的childThird組件中我們可以通過inject獲取for這個變量


原文鏈接:
https://zhuanlan.zhihu.com/p/103763164



分享到:


相關文章: