javascript - 在子组件Vue Js中使用父组件数据

Question

我正在使用 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
    }
});

Answer 1

我认为这是模板编译范围的问题。

您似乎正在使用名为 Content Distribution with Slots 的东西，但模板变量的作用域不正确。

引用号:https://v2.vuejs.org/v2/guide/components.html#Compilation-Scope

引自页面:

A simple rule of thumb for component scope is:

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

我假设以下几行模板属于您的根组件:

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

这里，用户已经在根组件中，因此它对于父组件和子组件都可用。但是您的问题是在父组件中定义的，而不是在root中定义的。

根据上面链接中的编译范围文档，您应该在根组件中也有问题以及用户。否则，您应该将父组件模板移至其自己的 vue 文件或父组件定义的模板字符串中。

编辑:为了清晰起见，可能的解决方案

选项 1:您可以定义根组件，并将问题与用户一起包含在其中:

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

上述根组件将使用户和问题对父组件和子组件都可用>.

选项 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
        }
    }
    // ...
})

现在您的子组件将能够获取属于您的父组件的this.questions