javascript-在 data() 方法中读取时，VueJS 属性未定义

我无法理解道具在 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() 方法中未定义。