关于vue.js:Vue项目在Vue文件中动态插入HTML模板怎么操作

52次阅读

共计 742 个字符，预计需要花费 2 分钟才能阅读完成。

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"
      :width="640"
    >
      <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 自行搜寻，很好用哦~~~

正文完