小编Sag*_*Kho的帖子

我正在尝试渲染一个 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>

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

我无法理解道具在VueJS中的工作方式,我们将非常感谢一些帮助.这是一个简单的谷歌地图组件,我希望在页面上显示并动态传递div的id元素作为底层模板的道具.

html文件 -

<div id="app">
    <google-map name="map"></google-map>
</div>

vue文件 -

<template>
    <div :id="mapName"></div>
</template>

<script>
module.exports = {
    name: 'google-map',
    props: [ 'name' ],
    data: () => {
        console.log(this.name); // ERROR: name is undefined
        return {
            mapName: this.name
        };
    },
    mounted: () => {
        const map = new google.maps.Map(document.getElementById(this.mapName), {
            zoom: 14,
            center: new google.maps.LatLng(39.305, -76.617)
        });
    }
}
</script>

<style scoped>
#map {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background: gray;
}
</style>

我得到的错误是this.name在组件对象的data()方法中未定义.