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

【问题标题】：How to get the compiled html content of a component in vuejsvuejs中如何获取组件编译后的html内容
【发布时间】：2020-10-29 23:05:33
【问题描述】：

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

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

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

【问题讨论】：

给你的组件一个 ref 然后访问该 ref 的内部 HTML。 this.$refs.foo.$el.innerHTML
我不想在 dom 的其他地方渲染这个组件。这就是问题所在。

标签： javascript vue.js

【解决方案1】：

一种解决方案是创建一个新的Vue实例，只包含目标组件$mount它，然后获取它的$el (root element)的outerHTML：

<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>

【讨论】：

我们如何用 vue 3 做同样的事情？