Question

我收到了 [Vue警告]：未知的自定义元素： - 您是否正确注册了该组件？对于递归组件，请确保在我的应用程序中提供“名称”选项。。

我正在使用单文件vue模板，如下所示：

<template lang="html">
    <div :class="['modal', {'is-active': isActive}]">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">{{ title }}</p>
                <button class="delete" @click="isActive = false"></button>
            </header>
            <section class="modal-card-body">
                <slot></slot>
            </section>
            <footer class="modal-card-foot">
                <button class="button is-success">Save</button>
                <button class="button" @click="isActive = false">Cancel</button>
            </footer>
        </div>
    </div>
</template>

<script>
export default {

    props: {
        'title': {
            type: String,
            default: 'Application Message'
        }
    },

    data() {
        return {
            isActive: false
        }
    },

    mounted() {
        console.log('MessageBox.vue mounted')
    }
}
</script>

<style lang="css">
</style>

在我的app.js中，使用NPM编译下来，我有这个：

window.Vue = require('vue');
Vue.component('pagination', require('./components/Pagination.vue'));
Vue.component('basic-table', require('./components/BasicTable.vue'));
Vue.component('message-box', require('./components/MessageBox.vue'));

在我的主页面中，这个：

<div id="msgbox">
    <message-box></message-box>
</div>
<script>
var messageBox = new Vue({
    el: '#msgbox',

    data() {
        return {

        }
    }
});
</script>

当我加载页面时，我会收到帖子顶部引用的vue警告。

我觉得组件应该正确注册，因为我可以成功使用我之前注册的基本表和分页控件。我没有收到NPM的编译错误或警告。

我使用相同的模式来创建我在这里用于消息框的基本表的实例。

Vue 2.0 WARN：未知的自定义元素

0 个答案: