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

问题描述

我收到以下警告：

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

应用程序.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"]为警告消失。

标签： javascriptvue.js

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

问题描述

解决方案

推荐阅读