vue 3 emit warning " Extraneous non-emits event listeners"

Question

I am trying to emit data from child to parent using the composition API

I get the following warning.

[Vue warn]: Extraneous non-emits event listeners (updatedcount) 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 <HelloWorld onUpdatedcount=fn > at

childcomponent.vue

<template>
  <h1>{{ store.count }}</h1>
  <button @click="fired">click me</button>
</template>

<script>
import useStore from "../store/store.js";
export default {
  name: "HelloWorld",
  setup(_,{ emit }) {
    const store = useStore();

    const fired = () => {
      store.count++;
      emit("updatedcount", store.count);
    };

    return {
      store,
      fired
    };
  },
};
</script>

parentcomponent.vue

<template>
  <div>
    {{ hello }}
    <br />
    <br />
    <input type="text" v-model="hello.searchQuery" />
    <br><br>
    <button @click="hello.count--">click me too!</button>
    <hello-world @updatedcount="mydata" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import useStore from "./store/store.js";

export default {
  components: {
    HelloWorld,
  },
  setup() {
    const hello = useStore();

    function mydata(event) {
      console.log(event);
    }

    return {
      hello,
      mydata
    };
  },
};
</script>

Solution 1

I think you need to define the emits in your component: https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events

export default {
  name: "HelloWorld",
  emits: ["updatedcount"], // <--- add this line
  setup(_,{ emit }) {
    ...
  },
};

Solution 2

update:

in vue 3 script setup you would do

const emits = defineEmits(["updatedcount"])

emits("updatedcount", store.count);

Comments

[Thomas]

@Fanna1119 Also took me a while to find it again, so don't blame yourself ;)

[Tobias Feil]

Note that it's probably best for now to name the event the way you did - no hyphens, just all lowercase letters. If you name it kebab-case, the runtime complains that you didn't declare it as an emit in camelCase; on the other hand, if you name it camelCase, EsLint complains because events are supposed to be kebab-case.

[Michael Zelensky]

Thank you, Creator of the Universe, for creating SoF, so that good people can post such good answers.

[SefaUn]

it works for me. thanks

[hitautodestruct]

@MichaelZelensky I think you mean thank you Jeff Atwood and Joel Spolsky 😏

[Prid]

@hitautodestruct: in the grand scheme of things, the inception of SO is dependent on the rise of technology and programmers -> first programmers and electrical engineers -> invention of electricity -> advancement in science -> evolution of human civilization -> ... -> first cause. In that sense, Tobias is right, but he probably meant to thank the Universe/Luck/Creator/First Cause/whatever that SO exists right now and is so accessible and useful 😇