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指出，註冊 「子組件」 childComponent的這一翻譯：

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

• 確保您註冊組件創建vue實例之前（這可能會或可能不適用於您的情況，我無法從您發佈的源代碼中得知：

  Vue.component（c hild-component'，{ template：'child'， data（）{return {}; }} ）

  新的Vue（{EL： '#APP'}）