收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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可以推断出来。

全代码:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

Angular中ng-bind和ng-model的区别实例详解
ng-bind和ng-model的区别AngularJS的数据绑定有ng-bind和ng-model,一般用于如下:inputng-model="object.xxx"spanng-bind="object.xxx"/spanng-bind是单向绑定,由作用于$scope到vie

vue.js单页面应用实例的简单实现
一:npm的安装由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功。测试node的版本号:node-v测试np

关于vue.js过渡css类名的理解(推荐)
首先附上官方文档图。总体就是在解释v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠标的mouseover和mouseout事件联想

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号