• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Vue 게시판 Vue3 Extraneous non-emits event listeners 경고

Vue3 Extraneous non-emits event listeners 경고

5 글 보임 - 1 에서 5 까지 (총 5 중에서)
  • 글쓴이
  • #9173

    진형래
    참가자

    안녕하세요 선생님 언제나 강의 재미있게 잘 듣고 있습니다.

     

    다름이 아니라 저희 뷰스타그램 수업에서 tab으로 이미지 전환을 할 때

    저희가 수업 때 짠 코드에서 개인적으로 추가로 버튼을 통해 custom event를 적용시켜봤는데요

     

    Container 컴포넌트에 추가로

    <button @click="$emit('tab_change', 0)">포스팅</button>
    <button @click="$emit('tab_change', 1)">이미지 필터적용</button>
    <button @click="$emit('tab_change', 2)">상세글 작성</button>

     

    App 컴포넌트에는

    <Container
        v-bind:post_inform="post_inform"
        v-bind:tab_state="tab_state"
        @tab_change="tab_state = $event"
      />

    으로 tab_change라는 메시지를 전달하게 했습니다 (저는 step이 아니라 tab_state라는 변수명을 썼습니다)

     

    그런데 작동은 다행히 무사히 잘 되지만 계속 콘솔창에는 앱 구동부터 페이지 전환할 때마다

    runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Extraneous non-emits event listeners (tab_change) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
    at <Container post_inform= (3) [{…}, {…}, {…}] tab_state=0 onTab_change=fn >
    at <App>

     

    이런 warning이 떠서요... 구글링을 했지만 뭔가 답변들이 이해가 잘 안되거나 혼란스러워서ㅠㅠ

    머리 싸매다가 혹시 조금 도움을 주실 수 있는지 질문드립니다.

    #9182

    codingapple
    키 마스터

    Container.vue 파일에 있는 html들을 감싸는 <div>를 하나 만들어봅시다 

    #9199

    진형래
    참가자

    구글에서 전부 listener 문제로 찾았다가 선생님 덕분에 한방에 해결...

    다시 확인해보니 제 실수로 추가한 글 작성 페이지 탭 HTML들을 기존에 감싼 <div>에 안 넣었네요.

    덕분에 해결하고 주의할 것 더 배우고 갈 수 있었습니다. 감사합니다

    #62252
    저도 똑같은 상황으로 곶통받고 있었는데 1년 전 글로 겨우 해결했네요
    이게 어떤 이유로 해결이 된건가요?
    #62270

    codingapple
    키 마스터
    커스텀이벤트넣으려면 html 태그 하나로 감싸는걸 권장한다는 워닝이라 그렇습니다
5 글 보임 - 1 에서 5 까지 (총 5 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠