在开发一个 PC 端的项目时,需要开发一个树状结构,直接上效果图如下:点击 "+" 号的时候则展开下一级,点击 "-" 号的时候则收起: 之所以写这篇博客,因为在实现过程中用到了组件递归,觉得之后再遇到此种功能时能借鉴一下,treeViewItem.vue 中通过 name: "treeViewItem" 实现组件内自己调用自己,实现组件递归,从而实现对树状结构数据的渲染: 数据结构如下: 代码如下: menusModule.js (store/…

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_133 所谓的无限极分类是啥?其实简单点说就是一个人类可以繁衍出多个后代,然后一个后代又可以分另外多个后代这样无限繁衍下去(可以想象神奇动物在哪里2里面莱斯特兰奇的家族族谱),就好象linux系统你可以新建一个文件夹,然后在这个文件夹里又可以建一些个文件夹,在文件夹底下还可以建一些文件夹一样,随后使用tree命令就可以查看文件夹目录层级. 那么这种层级结构也成为树结构在日常的开发需求里也是很常见的,比如美多商城系统的商品分类,课…

介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹SideBar导入到现有项目中即可使用. 工作流程 组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据…

先来说下需求,就是一个表单,会有树形结构一样,会有子表单,表单显示什么内容是后台通过接口数据来确定的:这个时候就和树形结构一样,肯定会有子组件的递归:这次是自己第一次写递归,遇到了三个问题记录下: 1.第一个问题就是,循环表单:看下图 然后这里的数据返回的是这样的: 说明下数据字段的含义:name属性算是表头,然后里面的valueType代表的是各种不同输入框:比方说上面的7代表的是普通的下拉框,然后6就是普通的输入框,1的话是布尔下拉框(其实在前端这边1和7是一样的,但是需要注意点的是Elem…

自己做个小项目练手,需要用到组件递归,网上查了一些资料,每个代码片段都认识,但是连起来,就一团浆糊. 既然人傻就多思考吧.不明白的点有以下: 1.组件怎么自己调用自己,函数的递归是就是在function fn(){ fn() },组件的递归没有看到这样子的呀. 答:组件中使用name属性,给组件自己定义个名字,这样在组件中就可以自己调用自己了.就像在函数中直接调用函数名来来递归. 2.组件的递归中一层又一层数据是如何获取到的? 答:将嵌套的数据重新赋值给prop设置的属性. <tree-menu…

前言 研究了下别人的 vue 多页面框架, 都是直接复制 package.json 文件,然后在本地 npm install 一下即可, 或者使用官网 vue-cli 工具生成一个项目, 觉得这样虽然看的懂, 但是记不住, 因此有必要从零开始搭建一个使用 .vue 作为组件的项目练习一下, 因此有了这个项目. 既然使用了 .vue 组件, 就不能像之前使用 jQuery 一样把 vue.js 引入页面中, 而是使用配套的 webpack + babel + 各种 loader 工具编译 .vue…

简介: 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: 组件的注册(官网) 有两种方式注册Vue组件:全局注册和局部注册,就好像欧元和英镑的区别, 前者可以在各Vue实例中使用,后者只能在注册他的Vue实例或者父组件中使用. 如果在组件中使用组件,就形成了组件的嵌套,如果组件里嵌套的组件是自己,就形成组件的递归. 组件由两部分组…

有很多网站会涉及到导航栏,我自己在开发中用的是element导航组件,并且自定义事件,给大家分享一下. 1.使用递归方法,无限循环子级菜单. 2.使用组件封装,维护方便. 3.使用index作为路由跳转. 4.结合后台动态渲染. 5.自定义样式,修改默认icon. 6.根据后台返回数据,动态设置默认选中. 1.封装组件. 首先创建好vue之后,在a_module里创建一个存放组件的文件夹,因为a_module是存放公共资源以及静态文件的,当然也可以根据喜好来创建. 2.调用组件. 在要使用到的页…

介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹SideBar导入到现有项目中即可使用. 工作流程 组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据…

转载:https://segmentfault.com/a/1190000016409329 Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue .x 提供了更多方式,让我们更灵活地使用组件来实现不同需求. 一.构建组件 1.1 组件基础 一个组件由 template.data.computed.methods等选项组成.需要注意: template 的 DOM 结构必须有根元素 data 必须是函数,数据通过 return 返回出去 // 示例:定…