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

一部これを実現する方法は次のとおりです。

• refを使用して直接子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/