Как импортировать Dynami c V-Bind: это компонент с модульной системой в Vue - PullRequest
Новая
       57

Как импортировать Dynami c V-Bind: это компонент с модульной системой в Vue

1 голос
/ 17 марта 2020

Проблема: Я пытаюсь программно зарегистрировать компонент, который будет использоваться в слоте на моем сайте Vue / Nuxt. Имя компонента включается в данные родительского файла index.vue, в этом случае компонент называется Projects. Я включил его в шаблон v-for, поскольку различные объекты в массиве данных 'modules' перебираются. Я предполагал, что это будет возможно / легко из документации dynamici c компонента и , однако мне не удалось заставить его работать в моем случае.

То, что я ожидаю, произойдет: Я ожидал, что компонент будет зарегистрирован и правильно «вставлен» в компонент Module.

Что на самом деле происходит: Пока я могу Посмотрите на визуализированном виде, что компонент «там», он не в правильном месте (то есть вставлен в компонент Module). Я также получаю vue/no-unused-components сообщение об ошибке: The "Projects" component has been registered but not used.

Я прочитал документацию о регистрации компонентов в модульных системах , но, похоже, это для более сложных случаев, чем я пытаясь достичь. Любой совет был бы очень полезен, поскольку я полностью застрял!

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>

Редактировать: В качестве примечания, при регистрации я получаю ту же ошибку компонент с import вот так: 

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>

1 Ответ

1 голос
/ 17 марта 2020

Вы используете тег самозакрытия в компоненте Module.

Это предотвращает рендеринг компонента Projects в слоте.

Просто замените: 

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

на: 

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

и это должно работать.

...