web-dev-qa-db-ja.com

VueJSのネストされた子コンポーネントへのアクセス

V2.2.2を使用します。 VueJSアプリには次の構造があります。 PostコンポーネントのメソッドからすべてのAccountコンポーネントにアクセスするにはどうすればよいですか？アカウントの数は動的です-ロードされたAccountコンポーネントをすべて取得して、それらを反復処理したいです。

$refsと$childrenに関係があることは知っていますが、正しい道を見つけられないようです。

<Root>
    <Post>
        <AccountSelector>
            <Account ref="anAccount"></Account>
            <Account ref="anAccount"></Account>
            <Account ref="anAccount"></Account>
        </AccountSelector>
    </Post>
</Root>
vue.jsvuejs2vue-component
25
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
_

Refがv-forと一緒に使用される場合、取得されるrefは、データソースをミラーリングする子コンポーネントを含む配列またはオブジェクトになります。

基本的に_AccountSelector.vue_内でthis.$refs.anAccount.map(account => doThingToAccount(account))を実行できます

Edit上記の答えは、直接の子にアクセスするためのものです。

現在、_$refs_を使用して非直接の親/子コンポーネントにアクセスする方法はありません。データにアクセスするための最良の方法は、イベント http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication または Vuex （お勧めします）。

直接の親ではない-子のコミュニケーションは、これら2つの方法のうち1つがなければ非常に注意が必要です。

33
Dan Gamble

$ refsを使用してネストされたコンポーネントデータにアクセスできます。その内部のrefsにアクセスする場合は、最初に最初のrefs（[0]）の最初の要素をターゲットにする必要があります

例：parent.$refs[0].$refs.anAccount

2
Abraham Duno Aguilera