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

Posted 吃个石头

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2 递归组件--树形学习分享相关的知识,希望对你有一定的参考价值。

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

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

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

 

 

以上是关于vue2 递归组件--树形学习分享的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js怎样把递归组件构建为树形菜单

vue递归组件—开发树形组件Tree--(构建树形菜单)

ElementUI实现表格加载树形数据教程

vue2 - 解决treeselect树形组件获取焦点后无法关闭element的选择器和日期选择器的问题

vue2 - 解决treeselect树形组件获取焦点后无法关闭element的选择器和日期选择器的问题

vue递归组件 (树形控件 )