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

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

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

谢谢，

Answer 1

一些可能有用的想法： - 如感谢指出，注册childComponent的“child-component”intead：

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

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

Vue.component（child-component'，{ 模板：'孩子'， data（）{return {}; } }）

new Vue（{el：'＃app'}）

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

1 个答案: