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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
JS实现小星星特效
Dec 24 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP $_SERVER详解
2009/01/16 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
PHP笔试题
2012/02/22 面试题
初中三好学生事迹材料
2014/01/13 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
作风建设年度心得体会
2014/10/29 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
租赁协议书
2015/01/27 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
python基础之//、/与%的区别详解
2022/06/10 Python