首页 > 代码库 > vue2 递归组件--树形学习分享

vue2 递归组件--树形学习分享

2024-09-13 17:46:54   217人阅读

今天看了老长时间递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。

效果如下图，点击后打开二级菜单，再点击后打开三级。

技术分享

//js  
//引子
aaa:{　//组件名字aaa，挂载到components中的。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
    name:‘aa‘,
    template:`
      <div>组件</div>
      <aa></aa>`     //其实这儿就已经是递归调用了，只要在html中使用但是会无限循环下去。所以就需要一个结束点。这个结束点怎么给？
　　　　　　　　　　　
}

由于每次递归组件，就相当于实例化了一次组件。所有写在组件data中的值都是该组件专属的，并不共有，所以在组件数据中设置flag或者其他，那是行不通的。
其实递归组件正真的用法就是做树状结构用的。
做法如下：
　　我们在父组件给出一个数据，子组件调用这个数据，然后子组件的子组件调用它父组件的数据，如此循环下去。只要数据结构相同，他们调用的方法相同，就行的通。当最后没有子组件的时候，
它不会报错，这个应该是被vue优化了。

思想：递归调用某个组件，而这个组件的作用就是解析出此层的数据。因此数据的格式就有技巧：

msg:[{//对此数组遍历。                                                                                                                      js
     text:1,  //第一层数据 ，要显示1，就要对顶层text遍历，xxx.text就得到1。点击‘1’弹出1-1就需要将父组件的xxx.next传给子组件。
     next:[{
         text:‘1-1‘,//第二层数据
         next:[{
            text:‘1-1-1‘,//第三层数据
            next:[{
                text:‘1-1-1-1‘,
            }]
         }]
     }]
  },{
      text:2,  //第一层数据
  },{
    text:3,   //第一层数据
  }]
//html
　　<div>
    　　<ggg :msg=‘msg‘></ggg> //这儿写在父组件模板中。
  　</div>

//js
ggg:{
      name:‘gs‘,// 这儿必须起个名字，这个名字其实就是构造函数的名字。没有名字无法递归组件。
      template:`// 构造函数的return值,模板。
      <ul >       
　　　　　　<li v-for=‘a in text‘> 
          {{a.text}}//第一次1、2、3；第二次 1-1 ，第三次1-1-1，第四次1-1-1-1 
          <gs :msg=‘a.next‘></gs> // 这儿递归用组件（构造函数），代码运行到这儿时会返回去调用。这儿有个很重要的操作，将这一层的a.text数据传到下一层去，并且改为text
        </li>
      </ul>`,
      props:[‘msg‘],//这个是接收父组件过的值
}

到此基本概念已经齐全了。

点击1 出现1-1：

<li v-for=‘a in msg‘ @click.stop.self=‘show=!show‘>// 在li标签添加一个点击事件，改变show的值。
　　{{a.text}}
　　<gs :msg=‘a.next‘ v-if=‘show‘ ></gs>　　　　　　　　　//官网上说了，这儿是show为true才会递归。就是解析下一次数据。
</li>　　　　　　　

点击1想出现1-2：修改data的值，从顶层数据出现1 2 3可以推断出来。

全代码：

<template >
  <div>
    <ggg :msg=‘msg‘></ggg> //组件使用 父组件传msg 子组件接收(：msg）
  </div>
</template>

<script>


export default {  //这儿用的脚手架，若是普通文件，这儿就是new Vue（{}）
  data(){
    return {
    msg:[{
        text:1,
        next:[{
          text:‘1-1‘,
          next:[{
            text:‘1-1-1‘,
            next:[{
              text:‘1-1-1-1‘,
            }]
          }]
        },{
          text:‘1-2‘ //1-2写在这儿，第二层数据数组中的a[1].text就是‘1-2’
        }]
      },{
        text:2,
      
      },{
        text:3,
      
      }]
    }
  },
  components:{
    ggg:{
      name:‘gs‘,
      template:`
      <ul >
        <li v-for=‘a in msg‘ @click.stop.self=‘show=!show‘>
          {{a.text}}
          <gs :msg=‘a.next‘ v-if=‘show‘ ></gs>
        </li>
      </ul>`,
      props:[‘msg‘],
      data(){
        return {
          show:false
        }
      }
    }
  }
}
</script>

 

 

vue2 递归组件--树形学习分享


联系
我们