vue 递归组件 + 无限树状列表

本文介绍如何利用Vue的递归组件创建无限层级的树状列表。重点包括:1)使用provide/inject来使子组件获取到父组件更新的数据,处理多级子孙组件的交互;2)将一维数组转换为树状数据结构的方法,解决后端返回非树形数据的问题;3)解决首次加载时子组件需二次调用以加载孙组件的策略,通过添加随机数确保数据重新加载。
摘要由CSDN通过智能技术生成

需求:需要展示树状,可以无限添加子目录

1创建父组件

<template>
  <div>
    <my-trees :list="list" :key="codeNum"></my-trees>
  </div>
</template>
<script>
import myTrees from "./child";
export default {
   
  components: {
   
    myTrees,
  },
  provide() {
   
    return {
   
      //刷新数据
      newFoo: this.detail,
    };
  },
  data() {
   
    return {
   
      list: [],
      codeNum:1,
    };
  },
  // computed:{
   
  //   //数据处理成树形
  //       treeData(){
   
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值