我尝试创建一个新的盒子组件，然后将其添加到屏幕上，但是，出现了标题中提到的错误。我还在控制台中得到了另一个错误：

[Vue warn]: Failed to resolve component: new-box
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>

下面是两段相关代码。
App.vue:

<template>
    <ul>
        <the-header title="Remember"></the-header>
        <new-box @add-box="addBox"></new-box>
        <box
            name="Box One" ></box>
        <big-box
            title="Big" info="Additional info">
        </big-box>
    </ul>
</template>

<script>
import TheHeader from './components/layouts/TheHeader.vue';
import Box from './components/boxes/Box.vue';
import BigBox from './components/boxes/BigBox.vue';
import NewBox from './components/boxes/NewBox.vue';

export default {
    components: {
        TheHeader,
        Box,
        BigBox,
        NewBox
    },
    data() {
        return {
        boxes: [
            {
            id: "box one",
            name: "name one",
            number: "one"
            }
        ]
        }
    },
    addBox(name, number) {
        const newBox = {
            id: new Date().toISOString(),
            name: name,
            number: number
        };
        this.boxes.push(newBox);
    },
}
</script>

<style scoped>
</style>

NewBox.vue:

<template>
    <form @submit.prevent="submitData">
        <div>
            <label>Name</label>
            <input type="text" v-model="enteredName" />
        </div>
        <div>
            <label>Box Number</label>
            <input type="text" v-model="enteredNumber" />
        </div>                    
        <div>
            <button>Add Box</button>
        </div>
    </form>
</template>

<script>
    export default {
        emits: ['add-box'],
        data() {
            return {
            enteredName: '',
            enteredNumber: ''
            }
        },
        methods: {
            submitData() {
                this.$emit(
                    'add-box', 
                    this.enteredName, 
                    this.enteredNumber
                );
            }
        }
    };
</script>


<style scoped>
#app input {
  font: inherit;
  padding: 0.15rem;
}
#app label {
  font-weight: bold;
  margin-right: 1rem;
  width: 7rem;
  display: inline-block;
}
#app form div {
  margin: 1rem 0;
}
</style>

你可以输入数据的框出现了，沿着你可以提交数据的按钮，但是，当点击它的时候，什么也没有发生，我希望它能工作，因为我最近才知道的数据发射器。我想知道是否应该有一个@click事件在NewBox.vue的按钮，但在示例代码中，启发了我在这里做的事情，他们也没有这个函数，而是依赖emit函数。