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

Question

I have a Vue.js app. In this app, I have a single file component . In this component, I want to have another component that's specific to the component. I'm trying to do something like this:

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>

After building with webpack, I then run my app in the browser. That app then generates an error in the console window that says:

Unknown custom element: - did you register the component correctly?

I believe I've set this up properly. However, clearly I haven't. What am I doing wrong? I can see where I may not have registered "child-component". However, I guess I'm not sure how to do that within a single file component. What am I missing?

Thank you,

Answer 1

Some ideas that might be helpful: - as thanksd pointed out, register "child-component" intead of childComponent:

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

• make sure you register the component before create the vue instance (this may or may not apply to your case, I cannot tell from the source code you posted:

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

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