Child Component member function access
221
작성한 질문수 1
안녕하세요.
먼저 유용한 강의 감사합니다.
강의를 바탕으로 프로젝트를 진행하고 있습니다.
제가 Naver Map Api를 이용해 주소를 기반으로 대락젹인 위치를 잡고, 지도를 통해 정확한 위치를 잡고자 컴포넌트를 작성했습니다.
import NaverMap from "@/components/External/NaverMap/NaverMap";
const map = {
install( Vue ) {
const clientId = process.env['VUE_APP_X_NCP_APIGW_API_KEY_ID'];
if( !clientId ) return;
const URL = `https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${clientId}`;
const script = document.createElement('script');
script.setAttribute('src', URL);
script.id = 'naver-map-load';
script.setAttribute('async', '');
script.setAttribute('defer', '');
document.head.appendChild(script);
Vue.component('naver-map', NaverMap);
}
}
export default map;
지도 컴포넌트에서는 지도가 로드되면 지도 컴포넌트 자신을 상위 컴포넌트에 $emit 함수를 통해 전달합니다.
methods: {
genCenter() {
return this.map.getCenterPoint();
},
createMap() {
let options = {};
options.zoom = 17;
if( this.options.longitude && this.options.latitude ) {
options.center = new window.naver.maps.LatLng(this.options.latitude, this.options.longitude);
}
this.map = new window.naver.maps.Map(this.map_content_id, options);
window.naver.maps.Event.addListener( this.map, 'center_changed', event => this.$emit( 'center_changed', event ) )
window.naver.maps.Event.addListener( this.map, 'centerPoint_changed', event => this.$emit( 'centerPoint_changed', event ) )
this.$emit('loaded', this );
}
}
위 코드에서 발생된 'loaded' 이벤트가 상위 컴포넌테에 전달되면 전달된 컴포넌트를 data에 저장합니다. 그리고 'center_changed' 이벤트가 발생하면 기존 전달된 컴포넌트 객체의 getCenter 함수를 통해 맵의 중심좌표를 가져와 data 설정하도로록 되어 있습니다.
onLoadMap( map ) {
this.map = map;
},
onCenterChanged() {
const map = this.map;
const center = map.getCenter();
this.center.longitude = center.x;
this.center.latitude = center.y;
},
그러나 data의 map 변수의 'getCenter' 함수에 접근할 수 없습니다. 디버그를 통해 보니 map 변수는 Proxy라는 기존 컴포넌트를 감싸고 있어 바로 접근이 안됩니다.
위 부분을 어떻게 처리하면 좋을까요?
답변 1
0
안녕하세요, 하위 컴포넌트 인스턴스를 가리키고 있는 this를 상위 컴포넌트에서 받아 내부 메서드를 조작하시려고 하시는거죠? 이건 컴포넌트 통신 방식의 표준에 위배되는 구조라 지양하셔야 합니다.
node 10버전 사용
0
87
1
강의에 대해 질문 드립니다.
0
78
1
vue CLI 대신 vite를 사용해도
1
169
2
질문삭제
0
172
2
강사님 코드로 진행할 경우 console.log( config); 도 안찍혔어요. instance 를 생성해서 공통으로 사용하셨는데 loginUser 에만 커스텀한 instance를 넣으니 콘솔에 컨피그 객체가 찍혀요
0
105
1
로그인 에러발생만하면 네트워크 커넥션 에러 발생 해결
0
130
1
rndrmagkqslek.
0
79
1
계속 따라하다가 안돼서 bash에 연결할떄 안되더라구요
0
110
1
axios 에러가 뜹니다.
1
250
2
vue3로 진행하시면서 router에서 '*' 적용이 안되시는 분들
2
324
1
vue 관련 다른 강의 출시예정이없으신지 궁금합니다!
1
159
1
AppHeader.vue에 vue 디폴트 만들에 Delete `␍` 오류나면
1
201
1
vue3로 따라오시다가 import axios 에러 뜨시는 분들
2
463
2
$router 를 이용한 메인 페이지로 이동
1
298
1
혹시 node.js 10.24 버전으로 해도 상관없나요?
2
479
2
에러 경로가 LoginForm.vue 43번째줄 말고 다른 경로로 출력됩니다.
1
303
2
pinia 사용할려고 하는데 에러가 나옵니다.
1
498
2
swagger ui의 post/posts에 글 기록하려고 하면 unauthorized 에러가 납니다..
1
1123
2
safari 개발자 도구에 대한 질문입니다
1
581
2
스웨거에 글 등록시 401 에러가 나와요 ㅠ
1
736
2
이 에러 때문에 진행이 안되네요 ㅠ
1
680
1
windows .nvmrc nvm use 실행 오류
1
1565
2
강사님 최신화가 필요해보입니다.
2
967
2
npm i 에러
1
626
1





