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>

预先将Vue组件转换为HTML

1 个答案: