vuejs中如何获取组件编译后的html内容

Question

我有一个像这样的组件<AgentCard :agent="agent" />，其中agent有一个具有诸如等属性的对象FirstName, LastName, Recent Orders......

现在我需要在 Google 地图信息框中显示此组件。该infoWindow.setContent()方法（显示弹出信息窗口的 Google Maps API）仅接受 HTML 字符串，因此我尝试手动渲染<AgentCard>，获取渲染组件的 HTML 内容，并将其传递给该setContent()方法。

我尝试过Vue.compile('<AgentCard :agent="agent" />').render()，但这不起作用。如何手动渲染 Vue 组件并获取其 HTML 内容？

Answer 1

一种解决方案是创建一个仅包含目标组件$mountit 的新 Vue 实例，然后获取outerHTML其$el（根元素）的：

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>

<script>
Vue.component('AgentCard', {
  template: `<div>{{agent.name}}</div>`,
  props: {
    agent: Object
  }
})

const app = new Vue({
  template: `<AgentCard :agent="agent" />`,
  data: () => ({ agent: { name: 'john doe' } })
}).$mount()

console.log(app.$el.outerHTML)
</script>