組件中的嵌套組件

Question

如何正確使用組件中的其他組件？這也表明我將兩個

import Item-card from './components/Item-card.vue'; 

和

components::{ 
    'item-card':Item-card 
}, 

後語法錯誤的警告更換模板如下：變更後

<template> 
    <div class="item-card"> 
    <item-card v-for="product in products"></item-card> 
    </div> 
</template> 

<script> 
    import Item-card from './components/Item-card.vue'; 
    export default { 
    components:{ 
     'item-card':Item-card 
    }, 
    data(){ 
     return{ 
     products:'' 
     } 
    }, 
    mounted(){ 
     ProductEvent.$on('products', function (products){ 
     this.products = products 
     }.bind(this)); 
    } 
    } 
</script> 

UPDATE1

錯誤代碼

import Item-card from './components/Item-card.vue'; 

到

import itemCard from './components/Item-card.vue'; 
    export default { 
    components::{ 
     'item-card':itemCard 
    }...., 

ERROR in ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Item-list.vue Module build failed: SyntaxError: Unexpected token (10:13) at Parser.pp$4.raise (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1822:12) at Parser.parseExprAtom (C:\xampp\htdocs\soyegg\node_modules\buble\dist\buble.umd.js:656:26) at Parser.pp$3.parseExprSubscripts (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parsePropertyValue (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1998:89) @ ./resources/assets/js/components/Item-list.vue 4:18-103 @ ./resources/assets/js/app.js

Answer 1

嘗試以下操作：

<script> 
    import itemCard from './components/Item-card.vue'; 
    export default { 
    components:{ 
     'item-card': itemCard 
    }, 
    data(){ 
     ......... 
     ......... 

同時檢查文件名是否輸入正確。