在vuejs中导入组件时出错

Question

这可能是一个简单的错误。但我是这个领域的新手。我在这里遇到意外令牌的语法错误：

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

会出现什么问题？

Answer 1

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

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

...假设您已在 default.vue 文件中导出 MyComponent 作为默认导出。

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

Answer 2

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

Default.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>