首页 文章

Vueify上的Vuejs递归组件

提问于
浏览
5

基于Vuejs文档示例,我试图做一个简单的树视图组件,我可以在没有任何交互的情况下显示会计科目表(没有添加任何拖放...非常简单) .

我在FiddleJs上做了一个例子,但是我的例子很好用......我不知道为什么在我的应用程序上我无法使它工作!我不知道是否有一些Vueify问题......可能你可以帮助我!

有我的代码:

OzChartTree.vue

<template>

    <ul v-if="model.length">
        <li v-for="m in model" :class="{ 'is-group': m.children }">
            {{ m.name }}
            <ul v-if="m.accounts">
                <li v-for="a in m.accounts">
                    {{ a.name }}
                </li>
            </ul>
            <oz-tree :model="m"></oz-tree>
        </li>
    </ul>

</template>

<script type="text/babel">

    import OzChartTree from './OzChartTree.vue'

    export default {

        components: {
            OzTree: OzChartTree
        },

        props: {
            model: Array,
        }

    }

</script>

Where I call the first time the tree view component

<oz-chart-tree :model="chart"></oz-chart-tree>

问题是当我在ja .vue文件上递归调用组件时 .

如上所述我得到以下错误:

app.js:23536 [Vue警告]:未知的自定义元素: - 您是否正确注册了组件?对于递归组件,请确保提供“名称”选项 .

但是是否正确注册为OzTree!我无法理解!

有人有什么想法吗?

1 回答

  • 13
    <script type="text/babel">
    
        import OzChartTree from './OzChartTree.vue'
    
        export default {
            name: 'oz-tree-chart', // this is what the Warning is talking about.
    
            components: {
                OzTree: OzChartTree
            },
    
            props: {
                model: Array,
            }
    
        }
    
    </script>
    

相关问题