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
    }....,

错误 ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Item-list.vue 模块构建失败：SyntaxError：意外的令牌（10:13）在Parser.pp $ 4.raise（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ node_modules \ acorn \ dist \ acorn.js：2221：15）在Parser.pp.unexpected（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ node_modules \ acorn \ dist \ acorn.js：603：10）在Parser.pp $ 3.parseExprAtom（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ node_modules \ acorn \ dist \ acorn.js：1822：12）在Parser.parseExprAtom（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ dist \ buble.umd.js：656：26）在Parser.pp $ 3.parseExprSubscripts（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ node_modules \ acorn \ dist \ acorn.js：1715：21）在Parser.pp $ 3.parseMaybeUnary（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ node_modules \ acorn \ dist \ acorn.js：1692：19）在Parser.pp $ 3.parseExprOps（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ node_modules \ acorn \ dist \ acorn.js：1637：21）在Parser.pp $ 3.parseMaybeConditional（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ node_modules \ acorn \ dist \ acorn.js：1620：21）在Parser.pp $ 3.parseMaybeAssign（C：\ xampp \ htdocs \ soyegg \ node_modules \ buble \ node_modules \ acorn \ dist \ acorn.js：1597：21）在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(){
         .........
         .........

如果文件名输入正确，请检查文件名。

将组件嵌套在组件中

1 个答案: