vue3——递归组件的使用

  • 该文章是在学习 小满vue3 课程的随堂记录
  • 示例均采用 <script setup>,且包含 typescript 的基础用法

一、使用场景

递归组件 的使用场景,如 无限级的菜单 ,接下来就用菜单的例子来学习

二、具体使用

先把菜单的基础内容写出来再说

父组件

html 复制代码
<Tree :data="mock" />
ts 复制代码
// 引入子组件
import Tree from "../components/17_组件/Tree.vue";

// 菜单的数据格式
interface ITree {
  name: string;
  checked: boolean;
  children?: ITree[];
}
// 数据 mock
const mock: ITree[] = [
  {
    name: "1",
    checked: false,
    children: [
      {
        name: "1-1",
        checked: true,
      },
    ],
  },
  {
    name: "2",
    checked: false,
  },
  {
    name: "3",
    checked: false,
    children: [
      {
        name: "3-1",
        checked: false,
        children: [
          {
            name: "3-1-1",
            checked: true,
          },
        ],
      },
    ],
  },
];

子组件

html 复制代码
<!-- 第一层数据 -->
<div v-for="item in data" style="margin-left: 16px">
  <input type="checkbox" v-model="item.checked" />
  {{ item.name }}
</div>
ts 复制代码
<script setup lang="ts">
// 这里为了方便直接拷贝过来了,实际项目中要抽离出来复用
interface ITree {
  name: string;
  checked: boolean;
  children?: ITree[];
}
// props 定义
defineProps<{
  data?: ITree[];
}>();
</script>

如图,上述代码已经完成了 第一层 菜单数据的渲染:

深层 的菜单数据,就要用到 递归组件 了,递归组件有以下 三种 使用方式

1、直接使用 自己的文件名 作为 组件名称,不需要引入

当前的文件名称是 Tree.vue,所以直接使用 Tree 即可

子组件

html 复制代码
<!-- 第一层数据 -->
<div v-for="item in data" style="margin-left: 16px">
  <input type="checkbox" v-model="item.checked" />
  {{ item.name }}
  <!-- 需要注意:需要按照格式传入子组件要用的数据,并且加上递归的判断条件 -->
  <Tree v-if="item?.children?.length" :data="item.children"></Tree>
</div>

使用结果如下:

2、子组件中再定义一个 script,并暴露出 name

子组件

ts 复制代码
<script lang="ts">
// 再起一个 script(lang必须保持一致),用来定义该组件的 name
export default {
  name: "TreeVue",
};
</script>

使用时,就可以用自定义的组件名

html 复制代码
<!-- 第一层数据 -->
<div v-for="item in data" style="margin-left: 16px">
  <input type="checkbox" v-model="item.checked" />
  {{ item.name }}
  <!-- 深层数据 -->
  <TreeVue v-if="item?.children?.length" :data="item.children"></TreeVue>
</div>

渲染结果一致:

3、使用 defineOptions 自定义组件名

  • Vue3.3 增加了 defineOptions 方法,用来定义 optionsAPI 中的选项,比如组件名称 name(老一点的 vue 版本要装插件才能使用 defineOptions)
  • 与上面第二种思路一致,就是起个名再用

子组件

ts 复制代码
<script setup lang="ts">
interface ITree {
  name: string;
  checked: boolean;
  children?: ITree[];
}
defineProps<{
  data?: ITree[];
}>();

// 直接在原有的 script 中进行自定义
defineOptions({
  name: "Self",
});
</script>
html 复制代码
<!-- 第一层数据 -->
<div v-for="item in data" style="margin-left: 16px">
  <input type="checkbox" v-model="item.checked" />
  {{ item.name }}
  <!-- 深层数据 -->
  <Self v-if="item?.children?.length" :data="item.children"></Self>
</div>

渲染结果仍然一致,不再赘述

相关推荐
ldj202010 天前
vue3整合element-plus
vue3
夜空孤狼啸14 天前
前端常用拖拽组件库(vue3、react、vue2)
前端·javascript·react.js·typescript·前端框架·vue3
sunshine_程序媛15 天前
vue3中的watch和watchEffect区别以及demo示例
前端·javascript·vue.js·vue3
meng半颗糖16 天前
vue3 双容器自动扩展布局 根据 内容的多少 动态定义宽度
前端·javascript·css·vue.js·elementui·vue3
3D虚拟工厂16 天前
3D虚拟工厂
3d·vue3·blender·数字孪生·three.js
霸王蟹20 天前
前端项目Excel数据导出同时出现中英文表头错乱情况解决方案。
笔记·学习·typescript·excel·vue3·react·vite
佚名猫24 天前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
技术闲聊DD1 个月前
Vue3学习(4)- computed的使用
vue3·computed
蓝胖子的多啦A梦1 个月前
Vue3 (数组push数据报错) 解决Cannot read property ‘push‘ of null报错问题
前端·vue3·push·数组数据
有梦想的攻城狮1 个月前
从0开始学vue:vue3和vue2的关系
前端·javascript·vue.js·vue3·vue2