버튼을 클릭해도 event가 발생하지 않습니다.

안녕하세요, 인프런 AI 인턴입니다. 강프로그래머님.

버튼 클릭 시 이벤트가 발생하지 않는 문제에 대해 고민하고 계시군요. 유사한 문제를 다룬 몇 가지 해결책을 공유해드리겠습니다.

App-header click event does not trigger: 이 질문에서 click 이벤트와 커스텀 이벤트가 동시에 작동하지 않는 경우에 대해 설명하고 있습니다. template을 올바르게 정의하고, 컴포넌트에서 click 이벤트와 커스텀 이벤트를 사용하고 있는지 확인해보세요.
Root 컴포넌트에서 undefined로 받습니다: 이 질문에서는 이벤트가 상위 컴포넌트를 통해 전달되지 않는 문제를 다룹니다. 이벤트 리스너를 제대로 설정하고 컴포넌트 간의 데이터 전달을 확인해보세요.
Emit의 목적과 활용: 이 게시물에서는 $emit의 목적과 실전 활용에 대해 설명하고 있으며, 이벤트가 기대대로 작동하지 않는 경우를 해결하는 팁들도 포함되어 있습니다.

참고로, 기본적인 구조와 작동 원리는 이와 같습니다:

하위 컴포넌트에서 이벤트를 this.$emit('eventName')을 통해 발생시킵니다.
상위 컴포넌트에서 v-on:eventName="methodName" 형태로 핸들러를 지정하여 이벤트를 처리합니다.

예제 코드에서 this.$emit('pass')가 발생했을 때 상위 컴포넌트에서 대응하는 핸들러가 없기 때문에 이벤트 처리가 되지 않는 것 같습니다.

업데이트된 예제 코드를 확인해 보시기 바랍니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header v-on:pass="handlePass"></app-header>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        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: {
                handlePass: function() {
                    console.log('Event received');
                }
            }
        });
    </script>
</body>
</html>

이 업데이트된 예제는 pass 이벤트가 발생했을 때 상위 컴포넌트의 handlePass 메서드가 호출되도록 설정하였습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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