如何在 Vue 中使用模块系统导入动态 v-bind:is 组件

Question

Problem: I am trying to programmatically register a component to be used in a slot in my Vue/Nuxt site. The component name is included in the data of the parent index.vue file, in this instance the component is named Projects . I am including it in a v-for template as the various objects in the 'modules' data array are iterated over. I had assumed this would be possible/easy from the dynamic component documentation and example however I have not managed to get it working in my case.

What I expect to happen: I expected the component to be registered and 'slotted' into the Module component correctly.

What actually happens: While I can see on the rendered view that the component is 'there', it is not in the correct place (ie slotted into the Module component). I also get a vue/no-unused-components error saying: The "Projects" component has been registered but not used .

I have read the documentation about component registration in modular systems but these seem to be for more complex cases than what I am trying to achieve. Any advice would be really helpful as I am totally stuck!

index.vue

<template>
  <div>
    <template v-for="module in modules">
      <Module
        :title="module.title"
        :to="module.link"
      />
      <component v-bind:is="module.slot" />
      </Module>
    </template>
  </div>
</template>

<script>
import Module from '~/components/module/Module.vue'
import Projects from '~/components/module/slots/Projects.vue'
export default {
  components: {
    Module,
    Projects
  },
  data () {
    return {
      modules: [
        {
          title: 'Work',
          slot: 'Projects'
        },
        {
          ...
        }
      ]
    }
  }
}
</script>

Edit: As a side note, I get the same error when registering the component with import like so:

components: {
  Module,
  'Projects': () => import('@/components/module/slots/Projects')
}

Module.vue

<template>
  <div>
    <h2>
      {{ title }}
    </h2>
    <slot />
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

Projects.vue

<template>
  <div>
    <h3>Projects</h3>
  </div>
</template>
<script>
export default {
  name: 'Projects'
}
</script>

Answer 1

You use the self closure tag in your Module component.

This prevents your Projects component to be rendered within the slot.

Just replace:

<Module
   :title="module.title"
    :to="module.link"
/>

with:

<Module
   :title="module.title"
    :to="module.link"
>

and it should work.