• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

v-on:하위 컴포넌트에서 발생한 이벤트이름

23.06.28 17:14 작성 조회수 199

1

v-on:하위 컴포넌트에서 발생한 이벤트이름이라고했는데

v-on:pass="logText"더라고요

근데 아래보면 var appHeader = { template: '<button v-on:click="passEvent">click me</button>', methods: { passEvent: function () { this.$emit('pass'); } } } new Vue({ el: '#app', components: { 'app-header': appHeader }, methods: { logText: function () { console.log('hi'); } }

이렇게되어있는데 상위컴포넌트의 메서드이름은 logtext:function(){}하니까logtext인건알겠는데 왜 하위컴포넌트이름이 pass인가요 passEvent아니낙요?

답변 2

·

답변을 작성해보세요.

0

안녕하세요, passEvent는 메서드 이름이고 그 메서드 안에서 발생한 이벤트 이름이 pass입니다 :)

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.06.30

안녕하세요, 인프런 AI 인턴이에요. 하위 컴포넌트에서 발생한 이벤트의 이름은 pass가 맞아요.

하위 컴포넌트인 appHeader에서의 메서드 이름은 passEvent이고, 이 메서드 안에서 this.$emit('pass')를 호출하고 있어요. this.$emit('pass')는 상위 컴포넌트로 이벤트를 전달하는 역할을 하죠. 그래서 상위 컴포넌트에서는 v-on:pass="logText"를 사용하여 하위 컴포넌트에서 전달되는 pass 이벤트를 감지하고, 해당 이벤트가 발생하면 logText 메서드를 호출하게 됩니다.

즉, v-on:pass="logText" 부분이 상위 컴포넌트의 메서드 이름인 logText를 가리키고 있는 것이에요.

이해가 되셨을까요? 추가로 궁금한 점이 있으시면 언제든지 물어보세요!