Question

我希望能够根据数据属性或prop换出组件的模板。这可能吗？

这是我的想法，但这当然行不通。

./index.vue

export default {
    props:{

    },
    template: import(`./Themes/Templates/${this.template}`),
    data: function() {
        return {
            template: 'Default'
        }
    },

./Themes/Templates/Default.vue

<div>
    <p>Default template</p>
</div>

当前出现此错误：

无效的模板选项：[对象模块]

Answer 1

尝试require("./Themes/Templates/Default.vue")

更新：

在Default.vue中：

...
export default {
    name: "Default"
}
...

和index.vue中的

：

...
template: this.temp,
data() {
    const { Default } = import("./Themes/Templates/Default.vue");

    return {
        temp: Default
    }
}
...

Answer 2

使用vue.js提供的component：

<template>
  <component :is="myComp"></component>
</template>

...
// You need to import all the possible components
import CompOne from '/CompOne.vue';
import CompTwo from '/CompTwo.vue'

props:{
  myComp: {
    default: 'comp-one',
    type: String,
  },
},
...

Vue，动态导入模板

2 个答案: