Использование данных родительского компонента в дочернем компоненте 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, но с неправильной областью определения переменных шаблона.

Ref: 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.

В соответствии с областью действия компиляции по ссылке выше, вы должны иметь questions также в корневом компоненте вместе с user. Или вы должны перенести шаблон родительского компонента в свой собственный файл vue или в строку шаблона определения родительского компонента.

EDIT: Возможные решения для ясности

Вариант 1: Вы можете определить корневой компонент, и включают в себя questions также в нем наряду с user:

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

Приведенный выше корневой компонент будет сделайте как user, так и questions доступными как для parent-component, так и для child-component.

Вариант 2: Вы можете избежать использования Content Distribution с Слоты и вместо этого использовать шаблон строки:

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 */ } 
} 

Затем измените метод, чтобы возвращать список вопросов вместо изменения данных компонента, и все готово. Шаблон правильный, вы просто поместите логику в несколько неправильное место.