Vue.js - 在单个文件组件中使用子组件

问题描述：

我有一个Vue.js应用程序。在这个应用程序中，我有一个single file component。在这个组件中，我想拥有另一个特定于组件的组件。我试图做这样的事情：Vue.js - 在单个文件组件中使用子组件

parent.vue

<template> 
    <div> 
    <child-component></child-component><br /> 
    <child-component></child-component> 
    </div> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     info: 'hello' 
     } 
    }, 

    components: { 
     childComponent: { 
     template: '<div>child</div>', 
     data() { return {}; } 
     } 
    } 
    } 
</script>

用的WebPack建成后，我再运行我的浏览器应用程序。然后，该应用程序在控制台窗口中生成一条错误消息：

未知的自定义元素： - 您是否正确注册了组件？

我相信我已经设置好了。但是，显然我没有。我究竟做错了什么？我可以看到我可能没有注册“儿童组件”的地方。但是，我想我不知道如何在单个文件组件中做到这一点。我错过了什么？

谢谢

嗯，我的作品。试试''child-component'：{'而不是'childComponent：{'。 – thanksd

答

一些想法，可能会有所帮助： - 作为thanksd指出，注册 “子组件” childComponent的这一翻译：

components: { 
     "child-component": { 
     template: '<div>child</div>', 
     data() { return {}; } 
     } 
    }

确保您注册组件创建vue实例之前（这可能会或可能不适用于您的情况，我无法从您发布的源代码中得知：

Vue.component（c hild-component'，{ template：'child'， data（）{return {}; }} ）

新的Vue（{EL： '#APP'}）

Vue.js - 在单个文件组件中使用子组件

相关推荐