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

eh57zj3b 于 2023-08-07 发布在 Vue.js

关注(0)|答案(2)|浏览(230)

我有一个像这样的组件<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内容？

vue.js

来源：https://stackoverflow.com/questions/64600435/how-to-get-the-compiled-html-content-of-a-component-in-vuejs

2条答案

按热度按时间

b0zn9rqh1#

一种解决方案是创建一个新的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>

字符串

赞(0）回复(0）举报 2023-08-07

bvpmtnay2#

在Vue 3上：

import { createApp } from "vue";    
const componentDiv = document.createElement("div"); 
createApp(MyComponent, { myProp: "here" }).mount(componentDiv); 
console.log(componentDiv.innerHTML);

字符串

赞(0）回复(0）举报 2023-08-07

我来回答

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

2条答案

相关问题

热门标签

最新问答