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

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>

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

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

</div>

</template>

<script>

export default {

    name:"MyComponent",

    props:['child'],

    data() {

        return {

            a : {},

        }

    },

    mounted() {

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

        .then((res) =>

        {

            this.a = res.data;

        })

        .catch((err) =>

        {

            console.error(err);

        });

    }

}

</script>