vue项目中加入html,【Vue项目】在Vue文件中动态插入HTML模板，怎么操作？

1.问题重现：

在实际开发中通过点击事件触发弹窗，动态展示模板内容。项目中有已经写好的html结构，不想在vue中重新写一套。

2.尝试：

最开始想到的办法是插值表达式，结果一用就错，插值表达式会将写好的html模板解释成字符串，并不会以html结构去展示

例如：

visible="basinModal"

>

// 想要展示的模板内容

{{ basinTemplate }}

然后希望通过设置innerHTML去操作，但是结构深代码过多

在对应组件中导入Vue -> 利用Vue.component("name", {template:

...

})创建组件 -> 在想要展示的地方插入组件

例如：

ref="basinModal"

v-model="basinVisible"

ok-text="确认"

@ok="hideModal"

:width="640"

>

import Vue from "vue";

import PubSub from "pubsub-js";

export default {

mounted() {

PubSub.subscribe("showBasinModal", (msg, template) => {

Vue.component("basinModal", {

template: `

${template}

`,

})

this.basinVisible = true;

});

}

}

ps：代码中的PubSub自行搜索，很好用哦~~~