vue怎么编写tree组件?

Question

1.编写一个tree的组件,因为tree可以无限添加子级,所有想再组件内再调用组件本身,这样实现无限循环循环遍历整个对象数组,但是好像不能这样实现,以下代码

<template>
    <ul>
        <li v-for="node in data">
            <div>{{node.text}}</div>
            <rs-tree :data="node.children"></rs-tree>
        </li>
    </ul>
</template>
<script>
    import RsTree from '../common/RsTree.vue'
    export default{
        props:{
            data:Array
        },
        components:{
            RsTree
        }
    }
</script>

以下是数据

<template>
    <rs-tree :data="treeDate"></rs-tree>
</template>
<script>
    import RsTree from '../common/RsTree.vue'
    export default{
        data(){
            return{
                treeDate:[
                    {
                        text : '中国',
                        add : true,
                        edit : true,
                        del : false,
                        children : [{
                            text : '辽宁',
                            add : true,
                            edit : true,
                            del : true,
                            children : [{
                                text : '沈阳',
                                add : false,
                                edit : true,
                                del : true,
                            },
                            {
                                text : '大连',
                                add : false,
                                edit : true,
                                del : true,
                            },

数据就是类似这样的结构

3.提示错误
"[Vue warn]: Attribute ":data" is ignored on component <rs-tree> because the component is a fragment instance: http://vuejs.org/guide/compon...e"

4.请问这种思路可行么?如果不可行应该是什么思路,谢谢指教

---

已经通过添加name属性解决,谢谢!

<template>
    <ul>
        <li v-for="node in treeData">
            <div>{{node.text}}</div>
            <items :tree-data="node.children"></items>
        </li>
    </ul>
</template>
<script>
    export default{
        name:"items",
        props:{
            treeData:Array
        },
    }
</script>

Answer 1

递归组件的话，要在组件选项中设置 name