Question

编辑

因此，以下内容基于Husam的回答，从技术上回答了该问题。

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（documentation）。

有问题的组件（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,
  }
}

（source）

这只是愚蠢的。我可以将背景插入逻辑移到父组件，然后使用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>

As seen here。可能适合您的情况。

使用模板文字的Dynamic Vue组件导入路径

1 个答案: