[英]Dynamic Vue component import path using template literals
EDIT编辑
So, the following technically answers the question, and is based on Husam's answer.因此,以下从技术上回答了这个问题,并且基于 Husam 的回答。
beforeCreate: function () {
this.$options.components.Background = () =>
import(`~/assets/img/marketing/user-group-backgrounds/user-group-bg-${this.bg}.svg`)
}
Will work as requested, fetching the background based on the bg
prop.将按要求工作,根据
bg
道具获取背景。 Only problem is, it is an SVG, not a .vue file, and not being passed through vue-svg-loader
, so I get the error Invalid Component definition
.唯一的问题是,它是 SVG,而不是 .vue 文件,并且没有通过
vue-svg-loader
传递,所以我收到错误Invalid Component definition
。
ORIGINAL QUESTION原始问题
I have a vue/Nuxt.js app in which we are using vue-svg-loader
( documentation ).我有一个 vue/Nuxt.js 应用程序,我们在其中使用
vue-svg-loader
(文档)。
The component in question ( child
) retrieves several bits of data as props from an object defined in its parent ( parent
) component.有问题的组件 (
child
) 从其父 ( parent
) 组件中定义的对象中检索几位数据作为道具。
parent
loops over the top entries in the object using v-for
, generating a child
for each. parent
使用v-for
遍历对象中的顶部条目,为每个条目生成一个child
项。
Each child
needs a different background image, whose path can be determined using:每个
child
都需要一个不同的背景图像,其路径可以使用以下方法确定:
`~/path/to/image/background-number-${prop-from-parent}`
Since vue-svg-loader
treats SVG images as components, and it provides several benefits I would like to leverage, I am trying to devise a solution that will allow me to do something along these lines:由于
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>
Doing so returns:这样做会返回:
NuxtServerError
render function or template not defined in component: Background
I have done research and seen that the only solution seems to be of this sort:我进行了研究,发现唯一的解决方案似乎是这种:
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,
}
}
Which is just silly.这很愚蠢。 I could move the background insertion logic the parent component and insert it into each
child
using <slot />
, and it would serve my purpose, but that seems much too declarative.我可以将背景插入逻辑移动到父组件并使用
<slot />
将其插入每个child
组件中,这将达到我的目的,但这似乎过于声明性了。 My list is currently 10 items long and may grow, and almost certainly will change in the future.我的清单目前有 10 项,并且可能会增加,而且几乎肯定会在未来发生变化。
You can try this technique ..你可以试试这个技术..
<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 . 如此处所见。 It might work in your case.
它可能适用于您的情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.