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

Question

我有一个 Vue.js 应用程序。在这个应用程序中，我有一个 single file component .在这个组件中，我想要另一个特定于该组件的组件。我正在尝试做这样的事情:

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 构建之后，我在浏览器中运行我的应用程序。然后，该应用程序在控制台窗口中生成错误消息:

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

我相信我已经正确设置了它。但是，显然我没有。我究竟做错了什么？我可以看到我可能没有注册“子组件”的地方。但是，我想我不确定如何在单个文件组件中执行此操作。我错过了什么？

谢谢，

Answer 1

一些可能有用的想法:- 正如 thanksd 指出的那样，注册“child-component”而不是 childComponent:

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

• 确保在创建 vue 实例之前注册组件(这可能适用于也可能不适用于您的情况，我无法从您发布的源代码中判断:

  Vue.component(子组件', { 模板:' child '， 数据(){返回{}； }})

  新 Vue({ el: '#app' })