精华内容
下载资源
问答
  • vue递归组件的理解

    2020-07-03 16:20:10
    vue的官网递归组件的...但是解释的例子不是很明确,下面我补充了一个例子,可以详细的理解递归组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

    vue的官网递归组件的解释https://cn.vuejs.org/v2/guide/components-edge-cases.html#递归组件
    但是解释的例子不是很明确,下面我补充了一个例子,可以详细的理解递归组件

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <tree-folder></tree-folder>
        </div>
        <script>
            Vue.component('TreeFolderContents', {
              props: ['children'],
              template: `
                <ul>
                  <li v-for="child in children">
                    <tree-folder v-if="child.children" :folder="child"/>
                    <span v-else>{{ child.name }}</span>
                  </li>
                </ul>
              `
            })
        
            Vue.component('TreeFolder', {
              //name: 'tree-folder',
              props: ['folder'],
              template: `
                <p>
                  <span>{{ folder.name }}</span>
                  <tree-folder-contents :children="folder.children"/>
                </p>
              `,
            })
        
            let vm = new Vue({
              el: '#root',
              data: {
                folder: {
                  name: 'f1',
                  children: {
                    folder: {
                      name: 'f2',
                      children: {
                        folder: {
                          name: 'f3',
                          children: {
                            folder: {
                              name: 'f4'
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            })
          </script>
    </body>
    
    </html>
    
    展开全文
  • Vue递归组件

    2021-07-18 22:23:05
    Vue递归组件1、递归组件2、实例 1、递归组件   组件可以在自己的模板种递归调用自身,但这需要使用name选项为组件指定一个内部调用的名称。当调用Vue.createApp({}).component({})全局注册组件时,这个全局的ID会...

    Vue递归组件

    1、递归组件

      组件可以在自己的模板种递归调用自身,但这需要使用name选项为组件指定一个内部调用的名称。当调用Vue.createApp({}).component({})全局注册组件时,这个全局的ID会自动设置为该组件的name选项。
      递归组件和程序语言中的递归函数调用一样,都需要有一个条件结束递归,否则就会导致无限循环。例如,可以通过v-if指令(表达式计算为假时)结束递归。

    2、实例

      下面看一个分类树状显示的例子,代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    	</head>
    	<body>
    		<div id="app">
    			<category-component :list="categories"></category-component>
    		</div>
    		
    	    <script src="https://unpkg.com/vue@next"></script>
            <script>
                const CategoryComponent = {
              		name: 'catComp',
              		props: {
              			list: {
              				type: Array
              			}
              		},
              		template: `
              			<ul>
              				<!-- 如果list为空,表示没有子分类了,结束递归 -->
              				<template v-if="list">
            						<li v-for="cat in list">
            							{{cat.name}}
            							<catComp :list="cat.children"/>
            						</li>
            					</template>
              			</ul>
              			`
                }
            	const app = Vue.createApp({
            	    data(){
            	        return {
            	            categories: [
            	  		    {
            		  			name: '程序设计', 
            		  			children: [
            		  				{
            		  					name: 'Java', 
            		  					children: [
            		  						{name: 'Java SE'}, 
            		  						{name: 'Java EE'}
            		  					]
            		  				}, 
            		  				{
            		  					name: 'C++'
            		  				}
            		  			]
            	  		    },
            			    {
              					name: '前端框架', 
              					children: [
              						{name: 'Vue.js'}, 
              						{name: 'React'}
              					]
            			    }]
            	        }
            	  	},
            	    components: {
            	  	    CategoryComponent
            	    }
            	}).mount('#app');
            </script>
    	</body>
    </html>
    

      渲染结果:
    在这里插入图片描述

    想想递归函数这个就很好理解了

    展开全文
  • 新建SidebarItem.vue文件,内容如下 <template> <div class="menu-wrapper"> <template v-if="hasNoChild(item)"> <div :class="{'submenu-title-noDropdown':!isNest}"> ...

    官网介绍在这里插入图片描述
    如何使用呢?
    新建SidebarItem.vue文件,内容如下

    <template>
    <div class="menu-wrapper">
        <template v-if="hasNoChild(item)">
            <div :class="{'submenu-title-noDropdown':!isNest}">
                {{item.code + 'item'}}
            </div>
        </template>
        <template v-else>
            <div slot="title">
                {{item.code + 'subitem'}}
            </div>
            <sidebar-item v-for="child in item.subResources" :is-nest="true" :item="child" :key="child.code" />
        </template>
    </div>
    </template>
    
    <script>
    export default {
      name: 'SidebarItem',
      props: {
        item: {
          type: Object,
          required: true
        },
        isNest: {
          type: Boolean,
          default: false
        }
      },
      data () {
        return {}
      },
      methods: {
        hasNoChild (item) {
          if (item.subResources.length > 0) {
            return false
          }
          return true
        }
      }
    }
    </script>
    
    

    怎么使用该vue文件呢,如下图
    在这里插入图片描述
    上图代码

    <template>
    <div>
        <sidebar-item v-for="resource in resources" :key="resource.code" :item="resource" />
    </div>
    </template>
    
    <script>
    import SidebarItem from './SidebarItem'
    export default {
      name: 'test',
      components: { SidebarItem },
      data () {
        return {
          resources: [{
            code: '1',
            subResources: [{
              code: '1-1',
              subResources: [{
                code: '1-1-1',
                subResources: []
              }]
            },
            {
              code: '1-2',
              subResources: []
            }
            ]
          }]
        }
      },
      methods: {
      }
    }
    </script>
    
    

    这里需要强调的时,组件调用自身时是根据自身的name选项来使用的
    在这里插入图片描述
    效果如下
    在这里插入图片描述

    展开全文
  • Vue 递归组件

    2020-12-09 10:48:47
    对于一些有规律的DOM结构,如果我们再一遍遍的编写同样的代码,显然代码是比较繁琐和不科学的,而且自己的工作量会大大增加, 那么有没有一种方法来解决这个问题呢?...为了方便理解递归组件,我写了一个小小的 Demo:

    对于一些有规律的DOM结构,如果我们再一遍遍的编写同样的代码,显然代码是比较繁琐和不科学的,而且自己的工作量会大大增加,

    那么有没有一种方法来解决这个问题呢?

    答案是肯定的,我们可以通过 递归 方式来生成这个结构,当然在 Vue 模板中也是可以实现的,我们可以在 Vue 的组件中调用自己本身,这样就能达到目的。

    当然,在 Vue 中,组件可以递归的调用本身,但是有一些条件:

    • 该组件一定要有 name 属性
    • 要确保递归的调用有终止条件,防止内存溢出

    为了方便理解递归组件,我写了一个小小的 Demo:

    下面有这样一个数据,我们希望把它做成一个文件树一样的结果:

    treeData: {
            title: "Web全栈架构师",
            children: [
              {
                title: "Java架构师"
              },
              {
                title: "JS高级",
                children: [
                  {
                    title: "ES6"
                  },
                  {
                    title: "动效"
                  }
                ]
              },
              {
                title: "Web全栈",
                children: [
                  {
                    title: "Vue训练营",
                    expand: true,
                    children: [
                      {
                        title: "组件化"
                      },
                      {
                        title: "源码"
                      },
                      {
                        title: "docker部署"
                      }
                    ]
                  },
                  {
                    title: "React",
                    children: [
                      {
                        title: "JSX"
                      },
                      {
                        title: "虚拟DOM"
                      }
                    ]
                  },
                  {
                    title: "Node"
                  }
                ]
              }
            ]
          }
    复制代码

    先写一个树组件(Item):

    <template>
      <li>
        <!-- 点击折叠展开 -->
        <div @click="toggle">
          <!-- 显示内容 -->
          {{model.title}}
          <!-- 显示折叠展开的图标,如果没有下级目录的话,则不显示 -->
          <span v-if="isFolder">[{{open?'-':'+'}}]</span>
        </div>
        <!-- 控制是否显示下级目录 -->
        <ul v-show="open" v-if="isFolder">
          <!-- 重点代码,调用自身,实现递归,绑定数据 -->
          <Item v-for="model in model.children" :model="model" :key="model.title"></Item>
        </ul>
      </li>
    </template>
    <script>
    export default {
      name: "Item",
      // 如果想使用此组件,则需要传递的数据
      props: {
        model: {
          type: Object,
          required: true
        }
      },
      data() {
        return {
          // 默认不显示下级目录
          open: false
        };
      },
      computed: {
        // 控制是否有下级目录和显示下级目录
        isFolder() {
          return this.model.children && this.model.children.length;
        }
      },
      methods: {
        // 点击折叠展开的方法
        toggle() {
          if (this.isFolder) {
            this.open = !this.open;
          }
        }
      }
    };
    </script>
    复制代码

    具体代码的功能已在上面注释

    再次强调,这个组件必须要含有 name 这个属性,如果没有 name 这个属性会造成控件自身不能调用自身,而且调用的时候最好绑定一个 key 值,因为这个 key 值是唯一的标识

    另外需要注意,当递归组件的时候,需要有一个条件来终止递归,在这里使用 v-for 隐形条件终止递归

    然后在外部组件引入这个组件,并绑定数据使用,如下:

    <template>
      <div>
        <ul>
          <!-- 使用这个组件,并绑定数据 -->
          <Item :model="treeData"></Item>
        </ul>
      </div>
    </template>
    <script>
    // 导入递归组件
    import Item from "./views/Item";
    export default {
      name: "App",
      data() {
        return {
          // 需要实现递归的数据,上面已经给出
          treeData: {...
          }
        };
      },
      components: {
        // 注册组件
        Item
      }
    };
    </script>
    复制代码

    上面的代码已经实现了一个递归树形结构了,展示效果如下:

    后面是 + 号 的可以点击展开,是 - 号 的可以点击折叠

    虽然这篇博客看起来很简单,只是一个小的知识点,但是Vue的递归组件确实是一个非常强大的功能。可以用来实现一些类似文件树、部门树、级联选择这样的组件,在实际业务开发中这些组件也经常用到,还是非常重要的~


    作者:YXi
    链接:https://juejin.cn/post/6844903913250881550
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 主要用到了vue递归组件思想、input的CheckBox类型输入框的使用。 需求 能够将传入的Json数据生成树形目录。 能够初始化选中节点。 能够手动选中节点,最终可将所有选中节点打印出来。 能够在初始化禁用节点。 能够...
  • 对于一些有规律的DOM结构,如果我们再一遍遍的编写同样的代码,显然代码是比较繁琐和不科学的,而且自己的工作量会大大增加, 那么有没有一种方法来解决这个问题呢?...为了方便理解递归组件,我写了一个小小的 Demo:
  • 自己做个小项目练手,需要用到组件递归,网上查了一些资料,每个代码片段都认识,但是连起来,就一团浆糊。 既然人傻就多思考吧。不明白的点有以下: 1.组件怎么自己调用自己,函数的递归是就是在function fn(){ ...
  • 关于vue组件递归的个人理解

    千次阅读 2018-07-02 20:49:28
    vue近来是前端最热门的框架之一,不久之前,在做项目的时候,遇到一个问题,就是vue组件递归的问题,经过研究,总结出以下几点,若有不同见解,欢迎各位大佬纠正.一.需求实现(这里用的是vue的脚手架搭建的项目总体框架) 各...
  • Vue递归组件

    千次阅读 2019-12-09 07:40:00
    作者:Milos Protic译者:前端小智来源:vuejsdevelopers简介 有人说递归很难理解,也有人不这么认为。递归函数简单的定义是:一个自调用函数,这意味着它将在执行的某个...
  • Vue中,组件可以递归的调用自己本身,但是有一些条件:该组件要有name属性要确保递归的调用有终止条件,防止内存溢出Demo下面为了方便理解递归组件,我写了一个小的demo:有这么一份数据,我们希望能把它做成像...
  • vue路由以及递归

    2020-06-11 23:26:15
    首先来说一下vue递归方法, 对于这个方法的一个简单的理解就是 他可以让复杂的方法简单化。举个简单的运用场景的例子,就是说假如我们做一个树形文件夹,简单点说就是层层嵌套的。那如果我们用for循环来做的话,要写...
  • Vue3.0理解

    2020-11-27 17:14:34
    一、vue3.0亮点 Performance:性能比Vue 2. x快1.2-2倍 Tree shaking support:按需编译,体积比Vue2. x更小 Composition API:组合API (类似React Hooks) Better TypeScript support:更好的Ts支持 Custom Renderer...
  • 关于VUE递归组件的学习运用BUG的产生自己写的修改BUG的代码大佬的代码自己进行优化代码逻辑流程图 BUG的产生 vue递归组件,因为一开始学习VUE只会组件的相关数据绑定来源于父组件,最后出现了需要达到控制递归...
  • Vue原理理解与使用

    2021-01-29 14:45:20
    前言:本文章是本人在学习vue时整理的知识点,初步入门,现在发布在csdn如果有想学习Vue的可以按着步骤来学习,提前告知学习当中Vue需要很多的环境和配置需要安装,请耐心学习。 使用软件:刚开始使用的是IntelliJ ...
  • Vue 3.0 学习理解

    2020-09-26 10:34:09
    Vue 3.0 学习理解
  • 1.在src/assets/的js目录中新建eventBus.js文件(名称可以自定义)在eventBus.js中引入Vue示例,并暴露该实例在components目录中创建的tset目录中新建first,seconds,parent 组件parent可以理解为他们的父组件,引入...
  • 怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48来源:亿速云阅读:81作者:Leah本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件,内容简明扼要并且容易理解,绝对能使你眼前...
  • Vue.js递归组件实现动态树形菜单

    千次阅读 2018-06-13 15:22:00
    使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神们的...
  • Vue理解(一)

    2019-10-08 13:21:53
    一、什么是 Vue ? 首先,Vue 是一个 MVVM 框架,M -- 模型,就是用来定义驱动的数据,V -- 视图,是经过数据改变后的 html,VM -- 框架视图,就是用来实现双向绑定的中间...
  • 理解vue

    2018-06-20 12:38:25
    vue
  • 深入理解vue

    万次阅读 多人点赞 2018-02-24 16:55:11
    理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话: Vue....
  • VUE】深入理解VUE

    2019-02-20 21:15:04
    vue的双向绑定原理及实现 前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向...
  • vue 理解过程

    千次阅读 2018-12-31 20:11:50
    https://www.red-gate.com/simple-talk/dotnet/net-development/introduction-to-vue-js-with-a-single-page-application-spa-in-visual-studio/ ...import Vue from 'vue'; import App from './App.vue'...
  • 前端学习----使用vue递归组件完成树形结构1.初步认知1.1MVVM和MVC1.2VUE的一些知识点递归组件展开效果 1.初步认知 近期整理以前杂乱的代码,发现有些还有点乱,就开始梳理并尝试用Vue来代替以前纯js和css制作导航栏...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,665
精华内容 3,066
关键字:

vue递归理解

vue 订阅