[Vue warn] Extraneous non-emits event listeners ... vuejs 3

[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. 
  at <블라블라 modelValue=true onUpdate:modelValue=fn onRequestState=fn<bound requestState> > 
  at <블라블라 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {_pStores: {…}, showData: ƒ, runPushDataModal: ƒ, commonFun: ƒ, …} > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <RouterView> 
  at <RouterView> 
  at <VMain> 
  at <VApp> 
  at <App>

 

뷰 환경에서 만날수 있는 경고문구 입니다.

해당 경고문구는 정의되지 않는 html element 이벤트를 사용자가 사용할 경우 발생 합니다.

* 정의된 이벤트는 대략적으로 onclick, select, drag 등이 있습니다.

 

정의되어있지 않는 이벤트는 대략적으로 사용자가 정의한 이벤트를 의미 합니다.

아래 샘플을 예로들면,

<PushModal @requestState="requestState" @click.stop=""></PushModal>

 

이러한 컴포넌트가 존재한다 가정하여 봅니다.

click 이벤트는 Dom 이벤트의 종류이기 때문에 문제가 없지만 requestState 라는 이벤트는 사용자가 만든 이벤트 이므로 해당 오류를 간혹 만날 수 있습니다.

이때 해당 오류가 발생한 컴포넌트에서 가장 최상단의 HTML 엘리먼트를 만들어 주게되면 해당 경고문구가 사라지는 것을 볼 수 있습니다.

 

* 오류가 발생하는경우

<template>
  <div>어쩌고저쩌고</div>
  <div>어쩌고저쩌고</div>
</template>

 

* 발생하지 않는 경우(최상단에 엘리먼트를 추가)

<template>
  <div>
    <div>어쩌고저쩌고</div>
    <div>어쩌고저쩌고</div>  
  </div>
</template>