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

4
我有一个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”。但是,我不确定如何在单个文件组件中执行该操作。我错过了什么?

谢谢。


1
嗯,对我来说可以。尝试使用"child-component": {而不是childComponent: { - thanksd
1个回答

1

一些可能有帮助的想法: - 如thanksd所指出的,应该注册"child-component"而不是childComponent:

components: {
      "child-component": {
        template: '<div>child</div>',
        data() { return {}; }
      }
    }
  • 在创建Vue实例之前,请确保您已注册组件(这可能适用于您的情况,我无法从您发布的源代码中确定):

    Vue.component('child-component', { template: 'child', data() { return {}; } })

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接