VueJs에서 하위 구성 요소의 데이터를 가져오는 방법

VueJs에서 하위 구성 요소의 데이터를 가져오는 방법

이것은 간단한 질문입니다만, 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>

여기에는 다음과 같은 방법이 있습니다.

• 참조를 통해 하위 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(또는 유사한 원리)를 사용하여 구성 요소 간에 상태를 공유합니다.
• 원하는 데이터가 부모 구성요소에 의해 소유되고 소품 바인딩을 통해 자식에게 전달되도록 구성요소를 재설계합니다.
• (고급)컴포넌트 템플릿의 fragment를 DOM의 다른 장소에 존재시키려면 portal-vue 플러그인을 사용합니다.

하위 구성 요소는 이벤트를 내보냄으로써 데이터를 계층 위로 전달합니다.

예를 들어 부모에서 이벤트를 수신하고 로컬 이벤트에 자녀 값을 추가합니다(여러 자녀 요소의 배열은 신중합니다).

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

자성분에서는$emit생성/장착에 관한 이벤트(예:

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

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

언급URL : https://stackoverflow.com/questions/47765755/how-to-get-child-components-data-in-vuejs