질문있습니다 ㅜㅜ

개인 프로젝트를 하다가 질문이 있어서 남깁니다ㅜ
제가 vuePagination 이라는 오픈소스를 사용중에

<Paginate
                    :page-count="totalpage"                  
                    :click-handler="clickCallback"
                    :prev-text="'Prev'"
                    :next-text="'Next'"
                    
                >
                   
                </Paginate>

이것을 보고
methods: {

clickCallback(pageNum) {
            console.log(pageNum);
            console.log(this);
}

}
이렇게 하면 this(Vue컴포넌트)속성을 찍어낼 수 있는데

clickCallback:pageNum=> {
console.log(pageNum);
console.log(this);
}

화살표 함수로 바꿀경우에는 window객체가 나올줄 알았는데 undefined 가 뜹니다

화살표함수가 아닌 일반함수로 콜백함수로 등록하고 this를 사용하면 현재 컨텍스트인 vue 컴포넌트를 가르켜서 속성을 출력할 수 있고
화살표함수인 경우는 현재 컨텍스트가 아닌 바깥의 부모컨텍스트를 참조하기에 window 객체를 출력할줄 알았는데 undefined가 뜨길레 이해가 잘안되서 여쭤봅니다..

그리고 공식문서에는 화살표 함수로 메소드를 정의하면 안된다고 하는데 제가 사용한 라이브러리에서는 사용법이

<script>
export default {
  methods: {
    clickCallback (pageNum) => {
      console.log(pageNum)
    }
  }
}
</script>

이렇게 나와있었는데 다른 문법인건가요 ???

안녕하세요 진영님, 좋은 질문이네요. 말씀하신 것처럼 뷰 인스턴스 옵션 속성에는 화살표 함수를 사용하면 안됩니다. 그 이유는 말씀하신 공식 문서에 잘 설명이 되어 있구요. 한 가지 첨언 드리자면 화살표 함수인 경우에는 window가 아니라 코드가 실행되는 시점의 상위 스코프를 참조합니다. 그랬을 때 현재 전역으로 객체를 선언한 게 아니라 .vue 파일에서 객체를 선언하였으므로 해당 객체가 될 것 같네요.

라이브러리에서 화살표 함수를 쓰라고 한 부분은 저도 의도를 잘 모르겠는데.. 해당 이유에 대해서는 그 오픈 소스 쪽 제작자에게 물어봐야 할 것 같습니다 ㅎㅎ

인프런 커뮤니티 질문&답변