inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 끝장내기 - 실무에 필요한 모든 것

Child Component member function access

221

jHansol

작성한 질문수 1

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라는 기존 컴포넌트를 감싸고 있어 바로 접근이 안됩니다.
위 부분을 어떻게 처리하면 좋을까요?

 

vuex javascript vuejs

답변 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