Vue.js 中的嵌套组件：无法安装组件：未定义模板或渲染函数

Question

我正在使用 Vue-CLI 并收到此错误。它位于 <comment> 组件中。

当 CommentForm 的 submitComment() 方法触发并将评论对象添加到 selfComments 以呈现时，错误发生。可能是因为他们互相引用了或者什么的，但我不确定。

我试图只包含相关信息：

编辑：我认为与此有关： https://forum.vuejs.org/t/how-to-have-indirectly-self-nested-components-in-vue-js-2/1931

CommentForm.vue

<template>
   ...
        <ul class="self-comments">
            <li is="comment" v-for="comment in selfComments" :data="comment"></li>
        </ul>
   ...
</template>

<script>    
import Comment from 'components/Comment'

export default {
    name: 'comment-form',
    components: {
        Comment
    },
    props: ['topLevel', 'replyTo', 'parentId'],
    data() {
        return {
            text: '',
            postingStatus: 'Post',
            error: false,
            selfComments: []
        }
    },
    methods: {
        submitComment() {
            ...
        }
    }
}
</script>

<style scoped lang="scss">
...
</style>

Comment.vue

<template>
       ...
             <comment-form v-if="replyFormOpen" :top-level="false" :reply-to="data.username" :parent-id="data.id"></comment-form>

             <!-- recursive children... -->
             <ul>
                 <li is="comment" @delete="numComments -= 1" v-for="comment in data.children" :data="comment"></li>
             </ul>

       ...
</template>

** importing CommentForm here seems to cause the issue

<script>
import CommentForm from 'components/CommentForm'

export default {
    name: 'comment',
    components: {
        CommentForm
    },
    props: ['data'],
    data() {
        return {
            deleteStatus: 'Delete',
            deleted: false,
            error: false,
            replyFormOpen: false
        }
    },
    methods: {
        ...
    }
}
</script>

<style scoped lang="scss">
...
</style>

有什么想法吗？

Answer 1

我认为您运行关注这个问题：Circular References between Components。

在您的 CommentForm 组件中，尝试在 beforeCreate() 事件期间注册 Comment 组件。这将帮助 Vue 确定解析组件的正确顺序。

<script>
export default {
    name: 'comment-form',
    props: ['topLevel', 'replyTo', 'parentId'],
    data() {
        return {
            text: '',
            postingStatus: 'Post',
            error: false,
            selfComments: []
        }
    },
    methods: {
        submitComment() {
            ...
        }
    },
    beforeCreate() {
        // register the Comment component here!!!!
        this.$options.components.Comment = require('components/Comment.vue');
   }
}
</script>

Vue.js 中的嵌套组件：无法安装组件：未定义模板或渲染函数

Nested components in Vue.js: Failed to mount component: template or render function not defined

vue.js

vue-component

vuejs2