将 Vue 模板渲染为 Javascript 变量？答案

【问题标题】：Rendering Vue template to Javascript variable?将 Vue 模板渲染为 Javascript 变量？
【发布时间】：2017-11-27 08:49:47
【问题描述】：

我正在使用方便的 Bootbox.js 为我提供简单的 Bootstrap 模式对话框。它的使用方式是这样的：

bootbox.dialog({message: "<div>HTML goes here</div>", onEscape: true, animate: false});

即，您将传递 HTML 作为“消息”属性的对话框实例化。我想为 HTML 使用 Vue 模板，但这有一点问题。使用 Vue，您可以将实例挂载到 DOM 元素 - 但在调用 bootbox.dialog 之前，DOM 元素不存在。我目前正在做的事情如下，虽然有效但很笨拙：

bootbox.dialog({message: "Loading...", onEscape: true, animate: false});
vm.$mount('.bootbox-body');

也就是说，我正在用一些 HTML 实例化 bootbox.dialog，一旦挂载了 Vue 实例，这些 HTML 就会立即被替换。理想情况下，我想做的是在调用 bootbox.dialog 之前将 Vue 模板呈现为 Javascript 字符串，然后我可以将该字符串作为消息属性传递。不过，我看不到这样做的方法。我知道我可以使用 vm.$mount 将实例挂载到文档外元素，但大概我需要将它插入到 DOM 中才能获取 HTML。

当然，我可能看错了，可能有一个我没有想到的更简单的解决方案，在这种情况下，我很想听听！

【问题讨论】：

标签： vue.js

【解决方案1】：

正如您所注意到的，您可以渲染到文档外的 div。您还可以获取 Vue 元素的 innerHTML (this.$el)，因此只需在 mounted() 中调用 bootbox.dialog。

new Vue({
  el: document.createElement('div'),
  template: '#foo',
  mounted() {
    // This is where you would call
    // bootbox.dialog({message: this.$el.innerHTML, onEscape: true, animate: false});
    console.log(this.$el.innerHTML);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<template id="foo">
<div>
  <div class="inverse">Hi there <button>foo</button></div>
</div>
</template>

【讨论】：