Vue 3：即使发出了也发出警告

Question

我收到以下警告：

[Vue warn]: Extraneous non-emits event listeners (addData) 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 <UserData onAddData=fn<bound dataSubmit> > 
  at <App>

在我的 Vue3 应用程序中。我在 UserData.vue 中使用了emits:["add-data"]，但警告仍然出现。 以下是vue项目的相关部分：

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>

用户数据.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 './components/UserData.vue'
import ActiveUser from './components/ActiveUser.vue'
import App from './App.vue'

const app = createApp(App);

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

app.mount('#app')

它工作正常，但它只是显示警告。

如果我将emits 部分更改为emits: ["add-data", "addData"]，警告就会消失。

Answer 1

有一个未解决的错误：

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

现在您需要使用emits: ['addData'] 来避免警告。