在组件中嵌套组件

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>

更新1

更改后的错误代码

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.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.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.parseExprSubscripts (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp.parseMaybeUnary (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp.parseExprOps (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp.parseMaybeConditional (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp.parseMaybeAssign (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp.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(){
         .........
         .........

同时检查文件名是否输入正确。

在组件中嵌套组件

Nesting component in a component

vue.js

laravel-5.3

vuejs2