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

Question

v-on:하위 컴포넌트에서 발생한 이벤트이름이라고했는데 v-on:pass="logText"더라고요 근데 아래보면 var appHeader = { template: '', 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아니낙요?

캡틴판교 · Answer

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

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴이에요. 하위 컴포넌트에서 발생한 이벤트의 이름은 pass 가 맞아요. 하위 컴포넌트인 appHeader 에서의 메서드 이름은 passEvent 이고, 이 메서드 안에서 this.$emit('pass') 를 호출하고 있어요. this.$emit('pass') 는 상위 컴포넌트로 이벤트를 전달하는 역할을 하죠. 그래서 상위 컴포넌트에서는 v-on:pass="logText" 를 사용하여 하위 컴포넌트에서 전달되는 pass 이벤트를 감지하고, 해당 이벤트가 발생하면 logText 메서드를 호출하게 됩니다. 즉, v-on:pass="logText" 부분이 상위 컴포넌트의 메서드 이름인 logText 를 가리키고 있는 것이에요. 이해가 되셨을까요? 추가로 궁금한 점이 있으시면 언제든지 물어보세요!