vue.js - 将 Vue 模板渲染为 Javascript 变量？

Question

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

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

即，您实例化对话框，将 HTML 作为“消息”属性传递。我想为 HTML 使用 Vue 模板，但这有点问题。使用 Vue，您将实例挂载到 DOM 元素 - 但 DOM 元素在调用 bootbox.dialog 之前不存在。我现在正在做的是以下操作，但效果不佳:

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。

当然，我可能以错误的方式看待这个问题，并且可能有一个我没有想到的更简单的解决方案，在这种情况下，我很想知道它!

Answer 1

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

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>