訪問VueJS中的嵌套子組件

使用v2.2.2。我在我的VueJS應用程序中有以下結構。如何從Post組件的方法訪問所有帳戶組件？帳戶數量是動態的 - 我想抓取所有已加載的Account組件並遍歷它們。訪問VueJS中的嵌套子組件

我知道它與$refs和$children有關，我似乎無法找出正確的道路。

<Root> 
    <Post> 
     <AccountSelector> 
      <Account ref="anAccount"></Account> 
      <Account ref="anAccount"></Account> 
      <Account ref="anAccount"></Account> 
     </AccountSelector> 
    </Post> 
</Root>

來源

2017-03-15 Luke Shaheen

http://vuejs.org/v2/guide/components.html#Child-Component-Refs

儘管道具和活動的存在，有時你可能仍然需要直接訪問一個子組件在JavaScript中。要達到此目的，您必須使用ref爲子組件分配參考ID。例如：

<div id="parent"> 
    <user-profile ref="profile"></user-profile> 
</div> 

var parent = new Vue({ el: '#parent' }) 
// access child component instance 
var child = parent.$refs.profile

當裁判用v-爲一起使用，將得到ref將爲陣列或含有該子組件鏡像數據源的對象。

基本上裏面AccountSelector.vue你可以做this.$refs.anAccount.map(account => doThingToAccount(account))

編輯以上回答是用於訪問直接孩子。

目前無法訪問$refs的非直接父/子組件。獲取數據的最佳方式是通過事件http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication或使用Vuex（我會推薦）。

如果沒有這兩種方法中的一種，非直接的父母 - 子女溝通非常棘手。

來源

2017-03-15 15:49:04

謝謝！但是，我怎樣才能將這些數據發佈到「Post」？我正在尋找訪問Post中的數據，比AccountSelector高一級。如果我做'後。$ refs.anAccount'我得到未定義。我錯過了一個關卡。 –

對不起，我現在得到你，我不知道你是否可以得到不直接的孩子。訪問他們的數據的最好方法是通過活動http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication或通過使用Vuex（我會推薦）。如果沒有這兩種方法中的一種，非直接的親子溝通是非常棘手的。 –

感謝您的參考 - 該段確實聲明我需要使用Vuex。我實際上正在這樣做，只是認爲有一個更直接的方式！你能修改答案，以便我可以接受答案嗎？ –

訪問VueJS中的嵌套子組件

回答

相關問題