Vue.js - 在單個文件組件中使用子組件

Question

我有一個 Vue.js 應用程序。 在這個應用程序中，我有一個文件組件。 在這個組件中，我想要另一個特定於該組件的組件。 我正在嘗試做這樣的事情：

父.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-component', { template: 'child', data() { return {}; } })

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