Vue.js递归组件构建树形菜单


Posted in Javascript onDecember 24, 2017

在Vue.js中一个递归组件调用的是其本身,如:

Vue.component('recursive-component', {
 template: `<!--Invoking myself!-->
    <recursive-component></recursive-component>
 });

递归组件常用于在blog上显示注释、嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同。例如:

Vue.js递归组件构建树形菜单

现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。

数据结构

一个树状UI的递归组件将是一些递归数据结构的可视化表达。在本教程中,我们将使用树状结构,其中每个节点都是一个对象:

一个 label 属性。

如果它有子节点,一个 nodes 属性,则它是一个或多个节点的数组属性。

与所有树结构一样,它必须有一个根节点,但可以无限深。

let tree = {
 label: 'root',
 nodes: [
  {
  label: 'item1',
  nodes: [
   {
   label: 'item1.1'
   },
   {
   label: 'item1.2',
   nodes: [
    {
    label: 'item1.2.1'
    }
   ]
   }
  ]
  }, 
  {
  label: 'item2' 
  }
 ]
 }

递归组件

让我们做一个递归组件来显示我们的称为 TreeMenu 的数据结构。它只显示当前节点的标签,并调用自己来显示任何子节点。文件名:TreeMenu.vue,内容如下:

<template>
 <div class="tree-menu">
  <div>{{ label }}</div>
  <tree-menu 
  v-for="node in nodes" 
  :nodes="node.nodes"
  :label="node.label"
  >
  </tree-menu>
 </div>
 </template>
 <script>
 export default { 
  props: [ 'label', 'nodes' ],
  name: 'tree-menu'
 }
 </script>

如果你使用一个组件递归,必须先给 Vue.component 做一个全局的定义,或者,给它一个 name 属性。否则,任何子组件将无法进一步调用它,你会得到一个不确定的“undefined component error”的错误提示。

基本事件

与任何递归函数一样,你需要一个基本事件来结束递归,否则渲染将无限期地继续下去,最终会导致堆栈溢出。

在树菜单中,当我们到达一个没有子节点的节点的时候,我们希望停止递归。你能通过 v-if 做到这一功能,但我们选择使用 v-for 将隐式地为我们实现它;如果 nodes 数组没有任何进一步的定义 tree-menu 组件将被调用。template.vue文件如下:

<template>
 <div class="tree-menu">
  ...
  <!--If `nodes` is undefined this will not render-->
  <tree-menu v-for="node in nodes"></tree-menu>
 </template>

使用用法

我们现在如何使用这个组件?首先,我们声明一个Vue实例,具有一个数据结构包括data属性和定义过的treemenu组件。app.js文件如下:

import TreeMenu from './TreeMenu.vue'
 let tree = {
 ...
 }
 new Vue({
 el: '#app',
 data: {
  tree
 },
 components: {
  TreeMenu
 }
 })

请记住,我们的数据结构有一个根节点。我们在主模板开始递归调用 TreeMenu 组件,使用根 nodes 属性来props:

<div id="app">
 <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>
 </div>

下面是它目前的样子:

Vue.js递归组件构建树形菜单

正确的姿势

在视觉上识别子组件的“深度”是很好的,这样用户就可以从UI中获得数据结构的感觉。让我们缩进每一层的子节点来实现这个目标。

Vue.js递归组件构建树形菜单

这是通过增加一个depth prop定义,通过 TreeMenu 来实现。我们将使用这个值动态地将内联样式与转换绑定在一起:将使用transform: translate的CSS规则为每个节点的标签,从而创建缩进。template.vue修改如下**:**

<template>
 <div class="tree-menu">
  <div :style="indent">{{ label }}</div>
  <tree-menu 
  v-for="node in nodes" 
  :nodes="node.nodes" 
  :label="node.label"
  :depth="depth + 1"
  >
  </tree-menu>
 </div>
 </template>
 <script>
 export default { 
  props: [ 'label', 'nodes', 'depth' ],
  name: 'tree-menu',
  computed: {
  indent() {
   return { transform: `translate(${this.depth * 50}px)` }
  }
  }
 }
 </script>

depth 属性在主模板中从零开始。在上面的组件模板中,你可以看到每次传递到任何子节点时这个值都会递增。

<div id="app">
 <tree-menu 
  :label="tree.label" 
  :nodes="tree.nodes"
  :depth="0"
 ></tree-menu>
 </div>

注意:记得 v-bind depth值以确保它是一个JavaScript数字类型而不是字符串。

展开/收起

由于递归数据结构可能很大,所以显示它们的一个很好的UI技巧是隐藏除根节点以外的所有节点,以便用户可以根据需要展开或收起节点。

为此,我们将增加一个局部属性showChildren 。如果他的值为False,子节点将不会被渲染。此值应通过点击节点切换,所以我们需要使用一个单击事件的监听器方法 toggleChildren 来进行管理。template.vue文件修改如下**:**

<template>
 <div class="tree-menu">
  <div :style="indent" @click="toggleChildren">{{ label }}</div>
  <tree-menu 
  v-if="showChildren"
  v-for="node in nodes" 
  :nodes="node.nodes" 
  :label="node.label"
  :depth="depth + 1"
  >
  </tree-menu>
 </div>
 </template>
 <script>
 export default { 
  props: [ 'label', 'nodes', 'depth' ],
  data() {
  return { showChildren: false }
  },
  name: 'tree-menu',
  computed: {
  indent() {
   return { transform: `translate(${this.depth * 50}px)` }
  }
  },
  methods: {
  toggleChildren() {
   this.showChildren = !this.showChildren;
  }
  }
 }
 </script>

总结

这样,我们就有了一个工作树菜单。用来画龙点睛的一个方法是,你可以添加一个加号/减号图标,这样可以使UI的显示更加明显。我还增加了的很好的字体和计算性能在原来 showChildren 的基础上。

Vue.js递归组件构建树形菜单

Javascript 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
jquery预加载图片的方法
May 27 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 #Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 #Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 #Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 #Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 #Javascript
vue项目常用组件和框架结构介绍
Dec 24 #Javascript
You might like
linux php mysql数据库备份实现代码
2009/03/10 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue webpack实用技巧总结
2018/04/24 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
对python添加模块路径的三种方法总结
2018/10/16 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
自我鉴定书面格式
2014/01/13 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
心理咨询承诺书
2014/05/20 职场文书
临床医学专业求职信
2014/08/08 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA