Vue项目在Vue文件中动态插入HTML模板，怎么操作？

Posted 2021-09-14 野望

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

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

例如：

  <a-modal
    visible="basinModal"
  >
    // 想要展示的模板内容
    {{ basinTemplate }}
  </a-modal>

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

3.解决方案：https://forum.vuejs.org/t/vue...
原文中评论区有一个办法惊艳到我。

在对应组件中导入Vue -> 利用Vue.component("name", {template: <div>...</div>})创建组件 -> 在想要展示的地方插入组件

例如：

   <a-modal
      ref="basinModal"
      v-model="basinVisible"
      ok-text="确认"
      @ok="hideModal"
      :
    >
      <basinModal></basinModal>
    </a-modal>
    
    <script>
    import Vue from "vue";
    import PubSub from "pubsub-js";
    
    export default {
      mounted() {
        PubSub.subscribe("showBasinModal", (msg, template) => {
          Vue.component("basinModal", {
            template: `<div>${template}</div>`,
          })
          this.basinVisible = true;
        });
      }
    }
    </script>

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