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