在 vuejs 中导入组件时出错答案

【问题标题】：Error while importing component in vuejs在 vuejs 中导入组件时出错
【发布时间】：2018-03-28 03:19:17
【问题描述】：

这可能是一个简单的错误。但我是这个领域的新手。我在此处收到有关意外令牌的语法错误：

component: () => import('@/layouts/default.vue'),

会有什么问题？

【问题讨论】：

把“@”换成点“.”
会是';'最后而不是'，'？
它实际上在我使用的一个包中。所以他们让它工作了。
@实际上为组件找到了正确的路径。
错误是什么？

标签： vue.js vuejs2

【解决方案1】：

如果您想将一个组件导入另一个模块/组件，请在文件顶部使用它：

import MyComponent from '@/layouts/default.vue'

...假设您已将 MyComponent 导出为 default.vue 文件中的 default 导出。

您可以将 MyComponent 更改为您想要的任何内容。

【讨论】：

【解决方案2】：

我假设您使用的是独立组件。在这种情况下，将export default 包含在您的default.vue 文件中，然后将import DefaultComponent from '@/layouts/default.vue 包含在文件顶部。然后，将 DefaultComponent 包含在 Components 部分中。

默认.vue

<template>
  <p>{{hi}}</p>
</template>
<script>
  export default{
    data: function(){
      hi: 'Hello World'
    }
  }
</script>
<style
</style>

Main.vue

<template>
  <default-component></default-component>
</template>
<script>
  import DefaultComponent from '@layouts/default.vue';

  export default{
    components: {
      'default-component': DefaultComponent
    }
  }
</script>
<style
</style>

【讨论】：