子コンポーネントで親コンポーネントデータを使用するVue Js

Question

Laraval Sparkを使用していて、コンポーネント内にコンポーネントがあります。私の親コンポーネントで

<parent-component :user="user"> 

    <child-component :user="user" :questions="questions"></child-component> 

<parent-component> 

私は私のデータ方式に質問データを持っている：あなたが見ることができるように

props: ['user'], 
data(){ 
    return { 
     questions: { 
      // these are set in another method in this file 
     }, 
    } 
}, 

、私が追加しました：使用することができるという希望で、私の子コンポーネントへの質問私はそれらをループする必要があるので、そのコンポーネントの質問。私が持っている子コンポーネントのための私のjsファイルで

：

props: ['user', 'questions'], 

しかし、私はすべての情報が含まれているユーザーとは異なり、デフォルトのオブジェクトを取得する質問を使用しようとしています。

イムは、ちょうど現在の推測として、これが正しく行われる必要がありますどのように

...ここ

は、子コンポーネントのJSファイルです：

Vue.component('control-question-navigation', { 
    props: ['user', 'questions'], 
    data() { 
     return { 
     // 
     } 
    }, 
    methods: { 
    }, 
    mounted() { 
     var $this = this; 
     console.log($this.questions); // return standard object 
     console.log($this.user); // returns the user data correctly 
    } 
}); 

Answer 1

私は、これはコンパイルの問題だと思いますテンプレートの範囲。

Content Distribution with Slotsという名前を使用しているようですが、テンプレート変数のスコープが正しくありません。

参照：ページからhttps://vuejs.org/v2/guide/components.html#Compilation-Scope

引用：

コンポーネントスコープの親指の簡単なルールがある：親テンプレートに

すべては、親スコープ内でコンパイルされます。子テンプレートのすべてが子スコープでコンパイルされます。

ここ

<div id="app"> 
    <parent-component :user="user"> 
     <child-component :user="user" :questions="questions"></child-component> 
    <parent-component> 
</div> 

は、ユーザーがルート要素にすでにあるので、それがparent-componentとchild-componentの両方に提供されています：

私は、テンプレートの次の行は、あなたのルートコンポーネントに属していると仮定します。しかし、questionsはparent-componentで定義され、rootでは定義されていません。

上記のリンクのコンパイルスコープドキュメントに従って、userと一緒にルートコンポーネントにquestionsがあるはずです。または、親コンポーネントテンプレートを独自のvueファイルまたは親コンポーネント定義のテンプレート文字列に移動する必要があります。

EDIT：あなたはあなたのルートコンポーネントを定義し、userと一緒にしてもquestionsを含めることができます：明瞭

オプション1のための可能な解決策

new Vue({ 
    el: '#app', 
    data: { 
     user: "test user", 
     questions: ["one", "two", "three"] 
    } 
}); 

上記のルートコンポーネントうuserとquestionsの両方をparent-componentとchild-componentの両方に使用できるようにします。

オプション2：あなたはスロットとコンテンツ配信の使用を避け、代わりにテンプレート文字列を使用することができます。

Vue.component("parent-component", { 
    template: ` 
     <child-component :user="user" :questions="questions"></child-component> 
    `, 
    props: ["user"], 
    data: function() { 
     return { 
      questions: {} // You can initialize this in a local method here 
     } 
    } 
    // ... 
}) 

今、あなたのchild-componentはthis.questionsがあなたのparent-component

Answer 2

に属する得ることができるようになります

questions: { 
     // these are set in another method in this file 
    } 

計算されたプロパティを使用します。

computed: { 
    questions(){ return this.anotherMethodInThisFile() } 
}, 
methods: { 
    anotherMethodInThisFile(){ return /* many questions */ } 
} 

次に、コンポーネントデータを変更するのではなく、質問のリストを返すようにメソッドを変更してください。テンプレートが正しいです、あなたはちょうど少し間違った場所にロジックを置く。