Vue.js动态组件-模板未显示组件数据

Question

我正在尝试使用VueJs构建测验游戏，直到现在一切都顺利进行，但是现在我开始使用动态组件 ，因此在显示数据时遇到了问题。

我有一个启动组件（“启动视图”），当用户单击“启动”按钮时，我希望将其替换为实际的“测验”组件（“进行中”）。 这样可以顺利进行。 但是，在第二个组件模板中，用{{ self.foo }}引用的数据不再显示，没有任何错误消息。

我的实现方式如下：

startComponent：

startComponent = {
    template: '#start-component',
    data: function () {
        return {
            QuizStore: QuizStore.data
        }
    },
    methods: {
        startQuiz: function () {
                this.QuizStore.currentComponent = 'quiz-component';
            }
        }
    }
};

和模板：

<script type="x-template" id="start-component">
    <div>
        <button v-on:click="startQuiz()">
            <span>Start Quiz</span>
        </button>
    </div>
</script>

注意：我使用的是x-templates，因为它在某种程度上使Python / Flask应用程序的其余部分最有意义。 但是，所有内容都包装在{% raw %}因此括号不是问题。

测验部分：

quizComponent = {
    template: '#quiz-component',
    data: function () {
        return {
            QuizStore: QuizStore.data,
            question: 'foo',
    }
};

和模板：

<script type="x-template" id="quiz-component">
    <div>
        <p>{{ self.question }}</p>
    </div>
</script>

如您所见，我正在使用QuizStore存储所有状态。

商店：

const QuizStore = {
    data: {
        currentComponent: 'start-component',
    }
};

在主要的.html文件中，我正在实现动态组件，如下所示：

<div id="app">
    <component :is="QuizStore.currentComponent"></component>
</div>

那么有效的方法是：

• 出现带有按钮的“开始”屏幕。
• 当我单击“开始”按钮时，quizComponent会按预期显示。

什么不起作用：

• QuizComponent模板中的{{ self.question }}数据未显示。 并且它不会引发错误消息。
• 它也不适用于{{问题}}。

我不明白的是：

• 如果我首先通过设置QuizStore.currentComponent = 'startComponent'渲染quizComponent，那么数据将整齐显示。
• 如果我切换回<quiz-component></quiz-component> （而不是动态组件），它也可以正常工作。
• 因此，这似乎是一个问题this. 不涉及当前活动的动态组件-所以我想这是错误的吗？ 但是话又说回来，我不明白为什么没有错误信息...

我不知道这里是什么问题-有人吗？

Answer 1

您的父组件可能不知道其子组件会遇到一些问题，并且QuizStore的构造具有一个data层，您在设置currentComponent时无需考虑这一data层。

 const startComponent = { template: '#start-component', data: function() { return { QuizStore: QuizStore.data } }, methods: { startQuiz: function() { this.QuizStore.currentComponent = 'quiz-component'; } } }; const QuizStore = { data: { currentComponent: 'start-component', } }; new Vue({ el: '#app', data: { QuizStore }, components: { quizComponent: { template: '#quiz-component', data: function() { return { QuizStore: QuizStore.data, question: 'foo' } } }, startComponent } }); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <script type="x-template" id="start-component"> <div> <button v-on:click="startQuiz()"> <span>Start Quiz</span> </button> </div> </script> <script type="x-template" id="quiz-component"> <div> <p>{{ question }}</p> </div> </script> <div id="app"> <component :is="QuizStore.data.currentComponent"></component> </div> 

Answer 2

最终，以下工作：

我只是将<component :is="QuizStore.currentComponent"></component>包装在父组件（“ index-component”）中，而不是直接将其放置在主html文件中：

<div id="app">
    <index-component></index-component>
</div>

在index-component内：

<script type="x-template" id="index-component">
    <div>
        <component :is="QuizStore.currentComponent"></component>
    </div>
</script>

也许这一直是正确的方法，也许不是，但是现在可以了：)非常感谢Roy的帮助！