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

Question

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

Answer 1

console.log(this.name); 返回 undefined 的原因是您正在使用箭头函数。应该是

data: function() {
    // ...
},

mounted: function() {
    // ...
}

或

data() {
    // ...
},

mounted() {
    // ...
}

说明：

见https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks