在另一个组件 VueJs laravel 中导入组件 vue答案

【问题标题】：import a components vue inside another components VueJs laravel在另一个组件 VueJs laravel 中导入组件 vue
【发布时间】：2020-07-23 01:38:50
【问题描述】：

我开始在我的 Laravel 项目中使用 vue js。我安装了所有软件包，但我的问题是当我尝试在另一个组件中调用一个组件并运行此命令时：

npm run dev

我在 webpack 中遇到了一个错误。

我的代码：

父组件TabelReception.vue：

<template>
<stats-card></stats-card>
    <table class="table">
        <tbody>
        </tbody>
    </table>
</template>
<script>
    import StatsCard from './StatsCard'
    Vue.component('StatsCard', StatsCard)
    export default {
        components: {
            'stats-card': StatsCard 
        }
    }
</script>

即将推出的组件StatsCard.vue：

<template>
<h2>
hi bro just a test 
</h2>
</template>
<script>
    export default {
    }
</script>

app.js：

import Vue from 'vue'
/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('reception-table', require('./components/TableReception.vue').default);
Vue.component('stats-card', require('./components/StatsCard.vue').default);
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

 const core = new Vue({
    el: '#core'
});

请帮忙。

【问题讨论】：

您好，您可以发布您遇到的错误吗？描述您的配置也可能有助于帮助您解决问题

标签： javascript laravel vue.js vue-component

【解决方案1】：

该组件只允许模板部分中的单个元素。如果你需要使用多个，用div包裹它并使其成为单个像

<template>
  <div>
    <stats-card></stats-card>  
    <table class="table"> 
        <tbody>

        </tbody>
    </table>
  </div>  
</template>

注册组件不需要同时使用这两种方法

<script>
   import StatsCard from './StatsCard'

   export default {
        components: {
          StatsCard
        }
    }
</script>

【讨论】：

它现在工作得很好，所以需要将它放在一个 div 中用于多个元素，如果我删除 app.js 呢：Vue.component('stats-card', require('./组件/StatsCard.vue').default);并直接从组件调用？
它会起作用的。 Vue.component()是全局注册一个组件。

【解决方案2】：

<template>
    <div>
        <stats-card>
        </stats-card>
    
        <table class="table">
    
    
            <tbody>
    
    
            </tbody>
        </table>
    </div>
</template>

<script>
import StatsCard from './statccard'


export default {
    components: {

        'stats-card': StatsCard
    }
}
</script>

the  template root on requires one ony one element but you have also iported the component wrongly

【讨论】：