vue.js - データを子からコンポーネントに渡す正しい方法は？

Question

私は、ルートインスタンスからコンポーネントにデータを渡す正しい方法について少し混乱しています。

のは、私はこのルートのインスタンスがあるとしましょう：

const app = new Vue({ 
    el: '#app', 

    data: { 
     foo: 'bar' 
    }, 
}); 

は、その後、私は別の.vueファイルのコンポーネントを持っている：これは正常に動作します

<template> 
    <div>I'm a component!</div> 
</template> 

<script> 
    export default { 
     methods: { 
      fooTest: function() { 
       console.log(this.$root.$data.foo); 
      }, 
     }, 

     mounted() { 
      this.fooTest(); 
     } 
    } 
</script> 

。 fooTestはルートインスタンスデータから "bar"を取得します。

これは正しい方法ですか？またはベストプラクティスは何ですか？

Answer 1

this.$root.$dataを使用しないでください。今のところうまくいくかもしれませんが、アプリが大きくなったらデバッグ作業が大幅に増えます。あなたが同じアプリで開発者のチームと作業しているときは、悪夢になるでしょう。

代わりに、適切な親子通信を使用する必要があります。ここではそのための公式ドキュメントは、次のとおりです。親から子へ

：https://vuejs.org/guide/components.html#Passing-Data-with-Props

子から親へ：ここhttps://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events

はあなたを助けるためにStackOverflowで別の参照です：https://stackoverflow.com/a/40181591/654825

jsFiddleその参照回答では親コンポーネントが子にデータを渡し、子コンポーネントが親にイベントを渡すケースがあります。要するに

、親は子にデータを渡すと、次のように子イベントを聞くことができます。

Vue.component('child-component', { 
    props: ["dataFromParent"], 
    ... 
}); 

することができますが、次のよう

<child-component :data-from-parent="someValue" v-on:event-from-child="methodInParent"></child-component> 

と子コンポーネントが親から上記データを受信することができますjsFiddleの例に従えば、このコミュニケーションの仕組みをよりよく理解できます。

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.