I receive the following warning:

[Vue warn]: Extraneous non-emits event listeners (addData) were passed to ponent but could not be automatically inherited because ponent renders fragment or text root nodes. If the listener is intended to be a ponent custom event listener only, declare it using the "emits" option. 
  at <UserData onAddData=fn<bound dataSubmit> > 
  at <App>

in my Vue3 app. I use emits:["add-data"] in UserData.vue but the warning still appears. Here are the relevant parts of the vue project:

app.vue

<template>
<div class="columns">
    <div class="column">
        <user-data @add-data="dataSubmit" />
    </div>
    <div class="column">
        <active-user @delete-user="deleteUser" v-for="user in users" :key="user.id" :name="user.name" :age="user.age" :id="user.id" />
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            users: []
        }
    },
    methods: {
        dataSubmit(name, age) {},
        deleteUser(id) {}
    }
}
</script>

UserData.vue

<template>
<h2>Add new user:</h2>
<form @submit.prevent="submitData">
    <label>Name*</label>
    <input type="text" v-model="name" placeholder="Name" />

    <label>Age*</label>
    <input type="text" v-model="age" placeholder="Age" />

    <button>add</button>
</form>
</template>

<script>
export default {
    emits: ["add-data"],
    data() {
        return {
            name: "",
            age: ""
        }
    },
    methods: {
        submitData() {
            this.$emit("add-data", this.name, this.age)
        }
    }
}
</script>

main.js

import { createApp } from 'vue'
import UserData from './ponents/UserData.vue'
import ActiveUser from './ponents/ActiveUser.vue'
import App from './App.vue'

const app = createApp(App);

appponent("active-user", ActiveUser);
appponent("user-data", UserData);

app.mount('#app')

It works fine, but it just displays the warning.

If I change the emits part to emits: ["add-data", "addData"] the warning disappears.

I receive the following warning:

[Vue warn]: Extraneous non-emits event listeners (addData) were passed to ponent but could not be automatically inherited because ponent renders fragment or text root nodes. If the listener is intended to be a ponent custom event listener only, declare it using the "emits" option. 
  at <UserData onAddData=fn<bound dataSubmit> > 
  at <App>

in my Vue3 app. I use emits:["add-data"] in UserData.vue but the warning still appears. Here are the relevant parts of the vue project:

app.vue

<template>
<div class="columns">
    <div class="column">
        <user-data @add-data="dataSubmit" />
    </div>
    <div class="column">
        <active-user @delete-user="deleteUser" v-for="user in users" :key="user.id" :name="user.name" :age="user.age" :id="user.id" />
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            users: []
        }
    },
    methods: {
        dataSubmit(name, age) {},
        deleteUser(id) {}
    }
}
</script>

UserData.vue

<template>
<h2>Add new user:</h2>
<form @submit.prevent="submitData">
    <label>Name*</label>
    <input type="text" v-model="name" placeholder="Name" />

    <label>Age*</label>
    <input type="text" v-model="age" placeholder="Age" />

    <button>add</button>
</form>
</template>

<script>
export default {
    emits: ["add-data"],
    data() {
        return {
            name: "",
            age: ""
        }
    },
    methods: {
        submitData() {
            this.$emit("add-data", this.name, this.age)
        }
    }
}
</script>

main.js

import { createApp } from 'vue'
import UserData from './ponents/UserData.vue'
import ActiveUser from './ponents/ActiveUser.vue'
import App from './App.vue'

const app = createApp(App);

app.ponent("active-user", ActiveUser);
app.ponent("user-data", UserData);

app.mount('#app')

It works fine, but it just displays the warning.

If I change the emits part to emits: ["add-data", "addData"] the warning disappears.

• javascript
• vue.js

• 1 It's a bug: github./vuejs/vue-next/issues/2540 – skirtle Commented Nov 21, 2020 at 20:29
• Ah, good to know! Can you add this as the answer so I can mark it solved? – miga Commented Nov 21, 2020 at 20:40

1 Answer 1

There is an open bug for this:

https://github./vuejs/vue-next/issues/2540

For now you'll need to use emits: ['addData'] to avoid the warning.