在vue.js中导入组件时出错

Question

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

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

会是什么问题？

Answer 1

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

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

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

您可以将MyComponent更改为所需的任何内容。

Answer 2

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

默认值

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

主线

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

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