vue3递归组件---树形组件

第一种方式,直接自己调用自己

Tree.vue

<template>
  <div class="tree">
    <div v-for="(item, index) in data" :key="item.name">
      每一层 {{ item.name }}
      <Tree v-if="item?.children?.length" :data='item.children' />
    </div>
  </div>
</template>

<script setup lang="ts">
//递归的第一种方式 直接引入自己
import Tree from './Tree.vue'
import { TreeList } from '../ts/type'
type Props = {
  data?: TreeList[]
}
defineProps<Props>();
</script>

<style scoped>
.tree {
  margin-left: 20px;
  border-left: 2px #01847f dashed;
}
</style>

App.vue 里模拟树形数据,使用递归组件

<template>
  <div>
    <Tree :data='data'/>
  </div>
</template>

<script setup lang="ts">
import Tree from './components/Tree.vue'
import { reactive } from 'vue'
import {TreeList } from './ts/type'
const data = reactive<TreeList[]>([
  {
    name: 'no.1',
    children: [
      {
        name: 'no.1-1',
        children: [
          {
            name: 'no.1-1-1',
            children:[]
          }
        ]
      },
    ],
  }, {
    name:'no.2'
  }, {
    name: 'no.3',
    children: [{
      name:'no.3-1'
    }]
  }

])
</script>

<style scoped></style>

type.ts 属性数据的结构

export type TreeList = {
  name: string //名称
  icon?: string //图标可有可无
  children?: TreeList[] | [] //子节点 可有可无 还可能传空数组
}

第二种方式,export 一个name出去

第二种方式 就是像vue2 一样 export一个name出去

但是setup 语法糖下没办法使用 export

我们只需要再定义一个script标签就可以了

<template>
  <div class="tree">
    <div v-for="(item, index) in data" :key="item.name">
      每一层 {{ item.name }}
      <Tree v-if="item?.children?.length" :data='item.children' />
    </div>
  </div>
</template>

<script setup lang="ts">
import { TreeList } from '../ts/type'
type Props = {
  data?: TreeList[]
}
defineProps<Props>();
</script>
<!-- 
  第二种方式 就是像vue2 一样 export一个name出去
  但是setup 语法糖下没办法使用 export 
  我们只需要再定义一个script标签就可以了
 -->
<script lang="ts">
export default {
  name:'Tree'
}
</script>

<style scoped>
.tree {
  margin-left: 20px;
  border-left: 2px #01847f dashed;
}
</style>

效果图

我们还可以给树形递归的组件添加参数传递事件

要注意在树形组件的里层也得添加自定义事件

并且这个自定义事件传的函数很有讲究

Tree.vue

<template>
  <div class="tree">
    <div @click.stop="clickTreeItem(item)" v-for="(item, index) in data" :key="item.name">
      每一层 {{ item.name }}
      <Tree  @get-tree-item="clickTreeItem" v-if="item?.children?.length" :data='item.children' />
        <!-- Tree 组件不添加这个自定义事件的话  那么就只有最外层的根节点会向外传递数据 -->
      <!-- 注意此处派发的函数clickTreeItem没有传item参数了如果传了就相当于给树形组件(递归组件)的上级派发信息 没办法从外部拿到子节点所传递的数据了 -->
           <!--   @get-tree-item="clickTreeItem(item)"  写成这种形式的话  递归组件会依次向上层传递事件   -->
      <!-- 不传item的执行结果如下 -->
      <!--子组件派发的item Proxy {name: 'no.1-1-1', children: Array(0)}
          子组件派发的item Proxy {name: 'no.1-1-1', children: Array(0)}
          子组件派发的item Proxy {name: 'no.1-1-1', children: Array(0)}
          父组件得到的item Proxy {name: 'no.1-1-1', children: Array(0)} -->
      <!-- 传item的执行的结果如下 -->
      <!-- 子组件派发的item Proxy {name: 'no.1-1-1', children: Array(0)}
           子组件派发的item Proxy {name: 'no.1-1', children: Array(1)}
           子组件派发的item Proxy {name: 'no.1', children: Array(1)}
           父组件得到的item Proxy {name: 'no.1', children: Array(1)} -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { TreeList } from '../ts/type'
type Props = {
  data?: TreeList[]
}
defineProps<Props>();

const emit =   defineEmits(['getTreeItem'])
const clickTreeItem=(item:TreeList)=>{
  console.log('子组件派发的item', item)
  emit('getTreeItem',item)
}
</script>
<!-- 
  第二种方式 就是像vue2 一样 export一个name出去
  但是setup 语法糖下没办法使用 export 
  我们只需要再定义一个script标签就可以了
 -->
<script lang="ts">
export default {
  name:'Tree'
}
</script>

<style scoped>
.tree {
  margin-left: 20px;
  border-left: 2px #01847f dashed;
}
</style>

App.vue

<template>
  <div>
    <Tree :data='data' @get-tree-item="getTreeItem"/>
  </div>
</template>

<script setup lang="ts">
import Tree from './components/Tree.vue'
import { reactive } from 'vue'
import {TreeList } from './ts/type'
const data = reactive<TreeList[]>([
  {
    name: 'no.1',
    children: [
      {
        name: 'no.1-1',
        children: [
          {
            name: 'no.1-1-1',
            children:[]
          }
        ]
      },
    ],
  }, {
    name:'no.2'
  }, {
    name: 'no.3',
    children: [{
      name:'no.3-1'
    }]
  }

])

const getTreeItem = (item:TreeList) => {
  console.log('父组件得到的item',item)
}
</script>

<style scoped></style>
相关推荐
gma9992 分钟前
JSONCPP 数据解析与序列化
开发语言·前端·javascript·c++
sky_feiyu8 分钟前
前端HTML
前端·html
随·枫13 分钟前
html渲染优先级
前端·html
码蜂窝编程官方19 分钟前
【含开题报告+文档+PPT+源码】基于SSM的电影数据挖掘与分析可视化系统设计与实现
java·vue.js·人工智能·后端·spring·数据挖掘·maven
小扳1 小时前
Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:电影院后台管理系统(前后端源码 + 数据库 sql 脚本)
java·前端·数据库·spring boot·mysql·spring·课程设计
田本初1 小时前
从0-1逐步搭建一个前端脚手架工具并发布到npm
前端·npm·node.js
Marshall35721 小时前
Canvas 和 SVG 的高级使用与性能优化
前端·svg·canvas
chusheng18402 小时前
Java基于SpringBoot+Vue的藏区特产销售平台
java·vue.js·spring boot·藏区特产销售平台·特产销售平台
Java学长-kirito2 小时前
springboot/ssm网购平台管理系统Java在线购物商城管理平台web电商源码
java·前端·spring boot
夫琅禾费米线2 小时前
JavaScript 中的 Generator 函数及其方法
开发语言·前端·javascript