嵌套/递归组件错误，未注册组件

Question

我正在尝试将组件本身与 Nuxt.js 组件一起使用，但在使用中出现此错误：

[Vue 警告]：未知自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我的代码看起来像这样components/MyComponent.vue

<template>

<div>

    <h1>{{ a.content }}</h1>

    <MyComponent :child="a.child" />

</div>

</template>

<script>

export default {

    data() {

        return {

            a : {},

        }

    },

    mounted() {

        axios.get('/api/blah/')

        .then((res) =>

        {

            this.a = res.data;

        })

        .catch((err) =>

        {

            console.error(err);

        });

    }

}

</script>

类似的代码适用于带有 vue.js 的原始单页 html 页面，不确定在此处使用之前如何命名组件。我如何让它工作？

Answer 1

您应该为您的组件提供一个名称以便递归地重用它，但您应该控制渲染以避免无限循环：<template><div>&nbsp; &nbsp; <h1>{{ a.content }}</h1>&nbsp; &nbsp; <MyComponent :child="a.child" /></div></template><script>export default {&nbsp; &nbsp; name:"MyComponent",&nbsp; &nbsp; props:['child'],&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a : {},&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; mounted() {&nbsp; &nbsp; &nbsp; &nbsp; axios.get('/api/blah/')&nbsp; &nbsp; &nbsp; &nbsp; .then((res) =>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.a = res.data;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch((err) =>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.error(err);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }}</script>