Путь импорта компонента Dynamic Vue с использованием литералов шаблона

Question

РЕДАКТИРОВАТЬ

Итак, следующее технически отвечает на вопрос и основано на ответе Хусама.

beforeCreate: function () {
  this.$options.components.Background = () =>
    import(`~/assets/img/marketing/user-group-backgrounds/user-group-bg-${this.bg}.svg`)
}

Будет работать по запросу, выбирая фон на основена bg проп.Единственная проблема в том, что это SVG, а не файл .vue, и он не передается через vue-svg-loader, поэтому я получаю сообщение об ошибке Invalid Component definition.

---

ОРИГИНАЛЬНЫЙ ВОПРОС

У меня есть приложение vue / Nuxt.js, в котором мы используем vue-svg-loader ( документация ).

Рассматриваемый компонент (child) получает несколькобиты данных в качестве реквизита от объекта, определенного в его родительском (parent) компоненте.

parent зацикливается на верхних записях объекта, используя v-for, генерируя child для каждого.

Каждому child требуется различное фоновое изображение, путь которого может бытьопределяется с помощью:

`~/path/to/image/background-number-${prop-from-parent}`

Поскольку vue-svg-loader рассматривает изображения SVG как компоненты, и это дает несколько преимуществ, которые я хотел бы использовать, я пытаюсь найти решение, которое позволит мне что-то делать в этом направлении:

<template>
  <div class="child">
    <Background class="background-image" />
    <p>
      ...
    </p>
  </div>
</template>

<script>
const Background = import(`~/path/to/image/background-number-${prop-from-parent}`)

export default {
  components: {
    Background
  },
  props: {
    prop-from-parent: { type: String, required: true }
    }
  }
</script>

При этом возвращается:

NuxtServerError
render function or template not defined in component: Background

Я провел исследование и увидел, что, похоже, единственное решение такого рода:

import BackgroundOne from 'path/to/background-one.svg'
import BackgroundTwo from 'path/to/background-two.svg'
import BackgroundThree from 'path/to/background-three.svg'

export default{
  components: {
    BackgroundOne,
    BackgroundTwo,
    BackgroundThree,
  }
}

( источник )

Что просто глупо.Я мог бы переместить фоновую логику вставки родительского компонента и вставить его в каждый child, используя <slot />, и это послужило бы моей цели, но это кажется слишком декларативным.Мой список в настоящее время насчитывает 10 пунктов и может увеличиться, и в будущем он почти наверняка изменится.

Answer 1

Вы можете попробовать эту технику ..

<script>
export default {
  props: {
    prop-from-parent: { type: String, required: true }
  },
  beforeCreate: function () {
    const filePath = `~/path/to/image/background-number-${this.prop-from-parent}`
    this.$options.components.Background = require(filePath).default
  }
}
</script>

Как видно здесь .Это может работать в вашем случае.