vuejs中如何獲取組件編譯后的html內容

Question

我有一個像這樣的組件<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 內容？

Answer 1

一種解決方案是創建一個僅包含目標組件的新 Vue 實例， $mount它，然后獲取其$el （根元素）的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>