Vue) 오류 Extraneous non-emits event listeners (함수명) were passed to component but...

 

Vue3 에서 부모-자식 컴포넌트로 emit을 쓰고 있는데 콘솔창에 아래와 같은 warning 이 떴다.

 

[Vue warn]: Extraneous non-emits event listeners (함수명) 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. 

 

 

함수는 작동이 잘 되지만 워닝은 최대한 안뜨는게 좋기에 원인을 찾아봤다. 

 

1) 부모 컴포넌트에 @함수명, 자식의 emit('함수명')이 잘 맞는지 확인

    잘 들어가 있다. 하긴 이게 안맞았으면 동작을 아예 안했겠지..ㅎㅎ

 

2) 워닝 메시지 분석

    Extraneous non-emits event listeners (함수명) were passed to component 

    이벤트 리스너(함수명)가 구성 요소에 전달되었습니다.

 

    but could not be automatically inherited because component renders fragment or text root nodes.

    하지만 구성 요소가 조각 또는 텍스트 루트 노드를 렌더링하기 때문에 자동으로 상속될 수 없습니다.

 

 

조각 또는 텍스트 루트...?

구성요소가 조각나있다는 말에서 생각이 났다. 

 

Vue에서 권장하는 코드는 <template> 코드안에 상위 태그 <div>로 감싸주는것을 권장하고 있다. 근데 내가 block이 아닌, inline-block요소로 가져오고 싶어서 <div>를 빼먹었는데 그게 문제였다. 

 

자식 컴포넌트를 하나의 태그로 감싸주지 않으니, 자식컴포넌트의 태그들이 감싸는 태그 없이 하나하나 조각처럼 렌더링 되었고, 그래서 워닝이떴던 것이다. 

 

그래서 다시 자식 컴포넌트를 하나의 태그로 감싸주었다ㅎㅎㅎ

<template>
  <span>
    <input />
    <div>자식 컴포넌트</div>
  </span>
</template>