vue组件递归与传值（权限复选框）

妹妹你大胆地往前走啊！

已于 2023-06-14 14:31:39 修改

阅读量1.1k

点赞数 3

分类专栏： vue 文章标签： vue.js

于 2021-06-07 09:01:32 首次发布

本文链接：https://blog.csdn.net/danruWang/article/details/117648733

版权

vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue进行组件递归，实现管理后台的权限管理模块，特别是处理多级菜单的场景。通过创建一个自调用的tree.vue组件，结合checkbox进行数据渲染，并利用bus.js进行组件间通信，处理编辑权限时的值传递问题。在编辑权限时，由于组件递归的关系，无法直接使用父子组件通信，而是借助事件总线传递数据。

摘要由CSDN通过智能技术生成

实战用例：管理后台–权限管理模块，多级菜单，菜单层级不固定
在这里插入图片描述
一、组件递归,页面渲染
数据渲染用组件递归（也可参考此博客）
菜单组件- -tree.vue：

<template>
    <div>
         <div v-for="(item,index) of list" class="level" :class="{'inline':item.items.length<=0 }">
            <el-checkbox :label="item.id" :key="item.id" @change="changeRule(item)">{{item.name}}</el-checkbox>
            <tree-menus :list="item.items"></tree-menus>//自己调用自己
        </div>
    </div>
</template>

<script>
    import {bus} from './bus.js'
    export default {
        name:'treeMenus',//自己调用自己
        props:['list',"rule"],
        data(){
            return {
               
            }
        },
        methods:{
            changeRule(item){
                bus.$emit('getH', item)
            }
        }
    }
</script>

调用组件- -menu.vue

<template>
    <div class="app-container">
        <el-checkbox class="checkAll" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="rule">
           <tree-menu :list="list" :rule="rule"></tree-menu>
        </el-checkbox-group>
        <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
</template>

<script>
    import {rulelist,editRule } from '@/api/manage'
    import treeMenu from "./tree"
    import {bus} from './bus.js'
    export default {
        data(){
            return {
                list:[
                	{
				    name: "菜单1",
				    children: [
				      {
				        name: "菜单1-1",
				        children: []
				      }
				    ]
				  }
				],
                rule:[],
            }
        }
    }

二、组件递归后的传值（编辑权限）
使用组件递归之后不能使用父子传值，不是普通的父子关系
新建一个bus.js文件

import Vue from 'vue'
export var bus = new Vue()

菜单组件- -tree.vue

import {bus} from './bus.js'

changeRule(item){
	//给调用组件传值
  	bus.$emit('getH', item)
}

调用组件- -menu.vue

import {bus} from './bus.js'


created(){
	//权限列表
	this.getList();
	//bus.$on获取菜单组件传过来的值
    bus.$on('getH', (item) => {
        this.rule=this.uniq(this.rule);
        this.checkId(item);
    })
},
methods:{
  checkId(item) {
     if(this.rule.indexOf(item.id)>-1){
          console.log('存在');
          this.addId(item.items,this.rule);
      }else{
          console.log('不存在');
          this.delId(item.items,this.rule);
      }
  },
  delId(arr,arrName){
      arr.forEach((item) => {
          arrName.forEach(item2=>{
              if(item.id==item2){
                  let index=arrName.indexOf(item.id);
                  arrName.splice(index,1)
                  if (item.items.length > 0) {
                      this.delId(item.items,arrName);
                  }
              }
          })
      })
      return arrName;
  },
  addId(arr,arrName){
      arr.forEach((item) => {
          arrName.push(item.id);
          if (item.items.length > 0) {
              this.addId(item.items,arrName);
          }
      })
      return arrName;
  },
  uniq(arr) {
    return [...new Set(arr)]
  },
}