VueJ에서 중첩된 자식 구성 요소에 액세스s

VueJ에서 중첩된 자식 구성 요소에 액세스s

v2.2.2 사용.나는 내 VueJS 앱에 다음과 같은 구조를 가지고 있다.내 Post 구성 요소의 메서드에서 모든 계정 구성 요소에 액세스하는 방법계정 수가 동적인 경우 - 로드된 모든 계정을 가져오십시오.Account구성 요소와 그 위에 반복하십시오.

그게 무슨 상관인 줄 알아$refs그리고$children올바른 길을 찾을 수 없는 것 같아

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

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

소품과 이벤트가 존재함에도 불구하고, 당신은 여전히 자바스크립트의 아동 구성요소에 직접 접근할 필요가 있을 수 있다.이를 위해 참조를 사용하여 하위 구성 요소에 참조 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))

편집 위의 대답은 직계 아동을 액세스하기 위한 것이다.

현재 다음 항목을 사용하여 비직접 부모/자녀 구성 요소에 액세스할 수 있는 방법이 없음$refs. 그들의 데이터에 접근하는 가장 좋은 방법은 이벤트 http://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication이나 Vuex를 사용하는 것이다.

비직접 부모 - 자녀 의사소통은 이 두 가지 방법 중 하나 없이 매우 까다롭다.

$ref를 사용하여 중첩된 구성요소 데이터에 액세스할 수 있으며, 내부 참조에 액세스하려면 먼저 첫 번째 참조의 첫 번째 요소([0])를 대상으로 해야 한다.

예:parent.$refs[0].$refs.anAccount

참조URL: https://stackoverflow.com/questions/42814406/accessing-nested-child-components-in-vuejs