使用 Nuxt 的自动导入组件，如何使用 <component> 元素？

Question

自 Nuxt.js v2.13 起自动导入组件。

但是我们如何使用<component :is="MyComponent" />？

这样写会报错：

MyComponent 未定义

在这种情况下，我们是否应该以常规方式导入组件（例如import MyComponent from '@/components/MyComponent'），如果这样，组件不会被导入两次吗？

编辑：

脚本：

export default {
  data () {
    return {
      componentNames: {
        index: 'ButtonSection',
        large_banner: 'LargeBanner',
        small_banner: 'SmallBanner'
      }
    }
  },
  computed: {
    ...mapState({
      sections: state => state.sections.section_list ?? null
    })
  }
}
</script>

模板：

<template v-if="sections">
  <component
    :is="componentNames[sections[i].section_type]"
    v-for="(section, i) in sections"
    :key="i"
  />
</template>

Answer 1

当您使用绑定符号: 时，模板会看到组件实例中已定义的属性，如果您不提供该符号作为字符串的标记，如果您要添加此配置：

export default {
  components: true
}

组件会自动解析，您可以像这样使用它：

<component is="ComponentName" />

或使用原始字符串绑定：

<component :is="'ComponentName'" />

或使用属性绑定：

<component :is="MyComponent" />

...

data(){
   return{
   MyComponent:'ComponentName'
 }
}