相关疑难解决方法(0)

我正在尝试渲染一个 vue js 组件，它很简单 -

var infowindow_content = "<google-map-infowindow ";
infowindow_content += "content='Hello World'";
infowindow_content += "></google-map-infowindow>";

通过将其传递到标记的信息窗口

this.current_infowindow = new google.maps.InfoWindow({
    content: infowindow_content,
});
this.current_infowindow.open(context.mapObject, marker);

而 vueJS 组件是 -

<template>
    <div>
        {{content}}
    </div>
</template>

<script>
module.exports = {
    name: 'google-map-infowindow',
    props: [ 
        'content',
    ],
}
</script>

但是，这不起作用并且窗口是空白的。

我正在开发一个 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>

该组件基本上呈现一个内部有文本的圆圈。如果我在主组件的模板部分中使用此组件，如下所示，那么它可以正常工作（显然）

主组件.vue

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

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

真实用例：-实际上，我创建了这个单独的组件以在我的传单地图上显示为标记。现在的问题是我想在 MainComponent 的方法中使用这个 …