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

Posted 2020-09-09 吃个石头

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

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

//js  
//引子
//思想：当v-if=‘false’时，循环时进行的。所以一开始就设置为false。
  ggg:{

      name:\'gs\',

      template:`

          <div>

          　　<p @click.stop=\'show=!show\'>我是p标签</p>   //这儿show必须要初始值为false，不然就是堆栈溢出，死循环。

         　　 <gs v-if=\'show\' ></gs>　　　　　　　　　　　　//这个是循环组件。命名后当函数使。

          </div>

    `,　　　　　　　　　

}

由于每次递归组件，就相当于实例化了一次组件。所有写在组件data中的值都是该组件专属的。
树状结构：
　　我们在父组件给出一个数据，子组件调用这个数据，然后子组件的子组件调用它父组件的数据，如此循环下去。只要数据结构相同，他们调用的方法相同，就行的通。当最后没有子组件的时候，
它不会报错，这个应该是被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可以推断出来。

改变样式： 由于树形结构是相同组件递归出来的，所以，各个组件数据不同，如果要改变某一个选择的样式，就需要全局变量，用bus或者单独js文件+import引入方式可做到全局变量。

全代码：

<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>