将Vue 3组件呈现为HTML字符串

2022-04-07 00:00:00 leaflet svg javascript vue.js vuejs3

我正在做一个vue.js项目(版本3)。我遇到了这样一种情况：我想要将呈现的组件的HTML视图用于当前组件的方法。

我在Vue项目中创建了以下SVG组件。

CircleWithTextSvg.vue

<template>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" width="20" height="20">
        <g id="UrTavla">
            <circle cx="10" cy="10" r="10" stroke="gray" stroke-width="1" :fill="fill" />
            <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">{{text}}</text>
        </g>
    </svg>
</template>

<script>
    export default {
        props: {
            text: { 
                type: String, 
                default: "1"
            },
            fill: { 
                type: String, 
                default: "white"
            }
        }
    }
</script>

该组件基本上呈现了一个内部带有文本的圆形。如果我在主组件的模板部分使用此组件，如下所示，则它工作得很好(显然)

MainComponent.vue

<template>
    <circle-with-text-svg />
</template>

但我想将此SVG组件呈现的输出作为选项发送给第三方。

实际用例：-实际上，我创建了这个单独的组件，以便在我的传单地图上显示为一个标记。问题是现在我想在MainComponent的方法中使用这个SVG组件，这样我就可以将它用作L.divIcon的一个选项

当我尝试以下操作时

export default {
    methods: {
        generateMap(element) {
            // ...
            let icon = L.divIcon({ 
                html: <circle-with-text-svg 
                    fill="'#D3D5FF'"
                    text="1" />, 
                iconSize: [10, 10]
            });
            // ...
        }
    }
}

然后给出错误

当前未启用对实验语法‘JSX’的支持

在反应中，我们可以简单地正常使用另一个组件的模板中的组件。但我们如何在vue.js中实现这一点

通过查看该错误，似乎未启用JSX实验版。

有人能告诉我如何实现这一点吗？

解决方案

好，所以我在评论中推荐了问题How to get the compiled html content of a component in vuejs的答案，它实际上是为Vue 2实现的

我很好奇这在Vue 3中是否有效，您可以看到下面的结果。以下是需要更改的内容：

明显的变化是将new Vue替换为createApp，而使用传递给render()的global h()
在Vue 2中，可以不带参数调用Vue主实例的$mount()函数。这是因为Vue在内存中创建了要挂载到的DOM元素。在Vue 3中不是这种情况-您需要自己提供元素
在我的示例中没有使用的一个重大更改但对某些用例非常重要，那就是在Vue 3中，使用app.component()在主应用程序实例中注册为全局的组件无法在用于呈现HTML的tempApp中访问。所有正在使用的组件都必须在相应的实例中注册-请参阅migration guide

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

// We use component options object with string template
// In the proper Vue app (with Webpack and Vue SFC) this whole block can be replaced with "import CircleWithTextSvg from CircleWithTextSvg.vue"
const CircleWithTextSvg = {
  name: 'CircleWithTextSvg',
  props: {
    text: {
      type: String,
      default: "1"
    },
    fill: {
      type: String,
      default: "white"
    }
  },
  template: `
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" width="20" height="20">
        <g id="UrTavla">
            <circle cx="10" cy="10" r="10" stroke="gray" stroke-width="1" :fill="fill" />
            <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">{{text}}</text>
        </g>
    </svg>
  `
}

const app = Vue.createApp({
  mounted() {
    console.log(this.getIconHtml('Hello!'))
  },
  methods: {
    getIconHtml(text, type) {
      const tempApp = Vue.createApp({
        render() {
          return Vue.h(CircleWithTextSvg, {
            text,
            type
          })
        }
      })

      // in Vue 3 we need real element to mount to unlike in Vue 2 where mount() could be called without argument...
      const el = document.createElement('div');
      const mountedApp = tempApp.mount(el)

      return mountedApp.$el.outerHTML
    }
  }
})

app.mount('#app')

<script src="https://unpkg.com/vue@3.1.4/dist/vue.global.js"></script>
<div id='app'>
</div>

注意1：上述代码旨在直接在import不可用的浏览器中运行。为此，我们使用Vue全局构建和访问Vue全局API，例如使用Vue.createApp或Vue.h。在常规Vue应用程序中，您需要将这些函数导入为import { createApp, h } from 'Vue'

注2：可以说，如果与单张组件一起使用的HTML片段像您的CircleWithTextSvg组件一样简单，那么将它们定义为template literals

将不是Vue组件，而是template literals

相关文章