[2023-05-31] Quasar, Vue3 : Warning "Extraneous non-emits event listeners" shows up even when emits is set ...

안녕하세요. 클스 입니다.

Child.vue --> Parent.vue 와  데이터를 주고받을 때, emit을 사용합니다.

그런데 아래와 같은 오류가 발생합니다.

Warning "Extraneous non-emits event listeners" shows up even when emits is set

declare it using the "emits" option.

해결 방법1)

Parent.vue 에서 root 로 div를 감싸주는 된다. 그런데 UI 가 깨지는 문제가 발생한다.

<template> 

    <div>  : 추가

      .... 여러가지 컴포넌트 들....

    <MenuComponent msg="string input" @testChange="testChange"/>

   </div>   : 추가
</template>

Child.vue 에서 아래와 같이 보내준다.

<script lang="ts">

...

methods: {

emitTestChange(val) {

this.$emit('testChange', val);

},

</script>

해결 방법2) 

Child.vue에 emits 를 추가해준다.

Parent.vue 에서 root 로 div를 감싸주는 된다. 그런데 UI 가 깨지는 문제가 발생한다.

<template> 

      .... 여러가지 컴포넌트 들....

    <MenuComponent msg="string input" @testChange="testChange"/>

</template>

Child.vue 에서 아래와 같이 보내준다.

<script lang="ts">

export default defineComponent({

emits: ['testChange'], ==> 이거 한줄 추가

setup(props) {

return {

        //TODO:

    };

},

methods: {

emitTestChange(val) {

this.$emit('testChange', val);

},

</script>

이상 클스 였습니다.

테스트 버전 ; vue3   quasar 2.11.x  chrome, macos 13.4 입니다.