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

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对象：

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) ... }, 
     } 
    }