VueJs에서 하위 구성 요소의 데이터를 가져 오는 방법은 무엇입니까?

Question

이 쉬운 질문이다하지만 난 Vue2 제대로 그것을 할 수있는 가장 좋은 방법을 잘 모릅니다 :

부모 요소 :

<template> 
    <div class="parent"> 
    <child></child> 
    {{value}} //How to get it 
    </div> 
</template> 

하위 구성 요소 :

<template> 
    <div class="child"> 
    <p>This {{value}} is 123</p> 
    </div> 
</template> 

<script> 
export default { 
    data: function() { 
    return { value: 123 } 
    } 
} 
</script> 

Answer 1

일부를 이를 달성 할 수있는 방법은 다음과 같습니다.

• 참조를 통해 하위 VM에 직접 액세스 할 수 있지만 자식 구성 요소가 마운트 될 때까지 참조가 채워지지 않고 $refs이 반응이 없으므로 털이 있습니다. 즉, 뭔가 해킹해야 할 수 있음을 의미합니다. 이 같은 :

  <template> 
      <div class="parent"> 
      <child ref="child"></child> 
      <template v-if="mounted">{{ $refs.child.value }}</template> 
      </div> 
  </template> 
  

  data() { 
      return { 
      mounted: false 
      } 
  }, 
  
  mounted() { 
      this.mounted = true; 
  } 
  

• $emit가 준비 또는 때마다이 변경 될 때 부모가 값을 얻을 수 있도록 아이 컴퍼넌트 내에서 값.

• Vuex (또는 이와 유사한 원칙)을 사용하여 구성 요소간에 상태를 공유하십시오.
• 구성 요소를 다시 디자인하여 원하는 데이터가 상위 구성 요소가 소유하고 하위 바인딩을 통해 하위 구성 요소로 전달되도록하십시오.
• (고급) 구성 요소 템플리트의 단편을 DOM의 다른 위치에 존재시키려는 경우 portal-vue 플러그인을 사용하십시오.

Answer 2

하위 구성 요소는 이벤트를 방출하여 계층 구조를 백업합니다.

예를 들어, 상위에서, 이벤트를 수신하고 (복수의 하위 요소 배열 신중한 것) 로컬 하나 자식 값을 추가 예

<child @ready="childVal => { value.push(childVal) }"></child> 

및 하위 구성 요소

, $emit 장착 생성 /의 이벤트, 예를 들어

mounted() { 
    this.$emit('ready', this.value) 
} 

데모 ~ https://jsfiddle.net/p2jojsrn/