1

我正在使用 Laravel 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
        },
    }
},

如您所见，我已将 :questions 添加到我的子组件中，希望能够使用该组件中的问题，因为我需要遍历它们。

在我的子组件的 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
    }
});
4

2 回答 2

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.

根据上面链接中的编译范围文档，您还应该questions在根组件中拥有user. 否则你应该将你的父组件模板移动到它自己的 vue 文件或父组件定义的模板字符串中。

编辑：清晰的可能解决方案

选项 1：您可以定义您的根组件，并questions在其中包括user：

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

于 2016-12-14T17:07:43.847 回答
0 
   questions: {
        // these are set in another method in this file
    }

您想使用计算属性。

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

然后更改方法以返回问题列表而不是更改组件数据，您就完成了。模板是对的，只是你把逻辑放错了地方。

于 2016-12-15T12:27:55.557 回答