Vue.js 中的嵌套组件:无法挂载组件:未定义模板或渲染函数 [英] Nested components in Vue.js: Failed to mount component: template or render function not defined

问题描述

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

I'm using Vue-CLI and getting this error. It's found in the <comment> component.

当CommentForm 的submitComment() 方法触发并将评论对象添加到selfComments 以呈现出来时，就会发生错误.可能是因为它们相互引用或其他原因，但我不确定.

When the CommentForm's submitComment() method fires and adds the comment object to selfComments to be rendered out, the error occurs. It might be because they reference each other or something, but I'm not sure.

我试图仅包含相关信息:

I've attempted to include only relevant information:

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

CommentForm.vue

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>

评论.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>

有什么想法吗?

推荐答案

我认为您遇到了这个问题:组件之间的循环引用.

I think you're running into this issue: Circular References between Components.

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

In your CommentForm component, try registering the Comment component during the beforeCreate() event. This will help Vue figure out the correct order in which to resolve the components.

<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 中的嵌套组件:无法挂载组件:未定义模板或渲染函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！