Question

我正在尝试使用2个组件制作一个新的Vue应用程序，但是这些组件无法渲染。错误是-“未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。我阅读了很多有关该问题的内容，但与其他人的代码不同，我无法在代码中识别出问题。

对我来说似乎不错，而不是第一个包含我编写的组件的应用程序：/

应用程序：

require('../../lib/jquery.event.drag-2.2/jquery.event.drag-2.2');
require('../../lib/jquery.event.drag-2.2/jquery.event.drag.live-2.2');
require('../../lib/jquery.event.drop-2.2/jquery.event.drop-2.2');
require('../../lib/jquery.event.drop-2.2/jquery.event.drop.live-2.2');

import Vue from 'vue';
import Axios from 'axios';
Vue.prototype.$http = Axios;

import tournamentCourtManager from 
'../../components/tournament/courtManager/courtManager';
import tournamentScheduleButton from 
'../../components/tournament/tournamentScheduleButton';
import { store } from "../../store/store";

new Vue({
    el: '#tournamentMatchSettingsApp',
    store,
    components: { 'tournamentCourtManager' : tournamentCourtManager, 
'tournamentScheduleButton' : tournamentScheduleButton }
});

tournamentCourtManager：

<template>
<button type="submit" class="btn btn-info">
    dadada
</button>

<script>
export default {
    name: 'tournamentScheduleButton',
    data() {
        return {}
    },
    mounted: function mounted() {
    },
    methods: {

    }
}
</script>

courtManager：

<template>
<div id="tournamentCourtManager">
..
    </div>
</template>

courtManager JS：

export default {
name: 'tournamentCourtManager',
components: {
    'match-cell': matchCell
},
data() {
    return {

    };
},
.... 
}

以及提示错误的代码-

       <tournamentschedulebutton></tournamentschedulebutton>
            <tournamentcourtmanager></tournamentcourtmanager>

Answer 1

由于您在'tournamentCourtManager'对象中命名了类似components的组件，因此它们在模板中必须命名为<tournament-court-manager>。

Vue组件-递归渲染还是这里的问题？

1 个答案: