javascript - 提前将Vue组件转换为HTML

Question

我需要创建一个 vuejs 组件并将其作为纯 html 传递到库(mapbox)中。 Mapbox 有一个用于我尝试填充的弹出窗口的 setHtml 方法。

https://docs.mapbox.com/mapbox-gl-js/example/popup/

var popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat([-96, 37.8])
.setHTML('<h1>Hello World!</h1>')
.addTo(map);

我还没有找到任何方法将特定组件预先渲染到 html 中，然后将其插入到 mapbox 调用中。有点像相反的 v-html。

Answer 1

为你的组件设置ref属性，然后你可以使用this.$refs.ComponentRef.$el.outerHTML获取组件渲染的HTML内容，记住创建时不要这样做.

<template>
  <div class="app">
    <Hello ref="hello" />
  </div>
</template>

<script>
import Hello from './Hello.vue'
export default {
  name: 'App',
  components: {
    Hello,
  },
  created() {
    // wrong, $el is not exists then
    // console.log(this.$refs.hello.$el.outerHTML)
  },
  mounted() {
    console.log(this.$refs.hello.$el.outerHTML)
  },
}
</script>