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: { 
    lat: null, 
    long: null, 
    radius: 2500 
} 

(필자는 VUE의 개발 도구에서이 구성 요소를 볼 수 있습니다) :

나는 내 응용 프로그램의 루트에 searchArea 객체가 있습니다. 이 객체를 기반으로 API 호출을 만들기 때문에이 객체를 업데이트하려면이 map.vue 구성 요소를 사용하고 싶습니다.

지도가 표시되므로 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) ... }, 
     } 
    }