① 先說,父組件如何主動獲取子組件的數據?
方案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
關鍵字: childThird refs children