Vue.js - 在单个文件组件脚本部分中使用 props

Question

我是vue的新手，很难让它工作。我为我的谷歌地图div制作了一个文件组件：

map.vue：

<template>
<div id="map" class="col-100">{{searchArea.radius}}</div>
</template>
<script>
function updateSearchLocation(latlng) {
this.searchArea.lat = latlng.lat();
this.searchArea.long = latlng.lng();
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
streetViewControl: false,
mapTypeControl: false,
zoomControl: false
});
google.maps.event.addListener(map, 'dragend', function() {
updateSearchLocation(map.getCenter());
});
addMyLocationButton();
getMyLocation();
}
window.initMap = initMap;
module.exports = {
props: {
searchArea: Object
}
}
</script>

这里调用的其他函数(addMyLocationButton，getMyLocation)也在此文件中定义并正常工作。不起作用的是访问 updateSearchLocation 函数中的 searchArea 对象。

我的应用程序根目录中有一个搜索区域对象：

searchArea: {
lat: null,
long: null,
radius: 2500
}

它已成功传递给此组件(我可以在 vue 开发工具中的此组件上看到它)。我想使用这个 map.vue 组件来更新这个对象，因为在另一个组件中，我正在基于这个对象进行 API 调用。

地图正在显示，因此正在调用 initMap。getMyLocation 方法获取用户的当前位置，然后调用相同的 updateSearchLocation 函数。

像这样加载我的地图：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap"></script>

Answer 1

将函数放入"方法"对象中的导出对象中：

module.exports = {
props: {
searchArea: Object
},
data: function() {
return {
latlng: whatever
}
},       
methods: {
updateSearchLocation: function(this.latlng) {..... },
initMap: function() {.. call updateSearchLocation() as this.updateSearchLocation(this.latlng) ... },
}
}