-
分析
- 递归组件我们用的比较少,但是在
Tree、Menu
这类组件中会被用到;
- 递归组件我们用的比较少,但是在
-
体验
- 组件通过组件名称引用它自己,这种情况就是递归组件
-
<template> <li> <div>{{model.name}}</div> <ul v-show="isOpen" v-if="isFolder"> <!--注意这里:组件递归渲染了它自己--> <TreeItem class="item" v-for="model in model.children" :model="model"> </TreeItem> </ul> </li> </template> <script> export default { name: 'TreeItem' //… } </script>
-
思路
- 1.下定义;
- 2.使用场景;
- 3.使用细节;
- 4.原理阐述;
-
回答范例
-
1.如果某个组件通过组件名称引用它自己,这种情况就是递归组件;
-
2.实际开发中类似
Tree、Menu
这类组件,它们的节点往往包含子节点,子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构,这种都是使用递归组件的典型场景; -
3.使用递归组件时,由于我们并未也不能在组件内部导入它自己,所以需要设置组件
name
属性,用来查找组件定义,如果使用SFC,则可以通过SFC文件名推断。组件内部通常也要有递归结束条件,比如model.children
这样的判断; -
4.查看生成的渲染函数可知,递归组件查找时会传递一个布尔值给
resolveComponent
,这样实际获取的组件就是当前组件本身; -
//范例 //父组件 <template> <h1>{{msg}}</h1> <Tree :model="model"></Tree> </template> <script setup> import { ref, reactive } from "vue" import Tree from '@/components/Tree.vue' const msg = ref("递归组件") const model = { label: "node-1", children: [ { label: "node-1-1" }, { label: "node-1-2" }, ] } </script> //递归组件 <template> <div>{{model.label}}</div> <Tree v-for="(item, index) in model.children" :key="index" :model="item"></Tree> </template> <script setup> import { ref, reactive } from "vue" defineProps({ model: Object }) </script>
-
原文地址:http://www.cnblogs.com/Mochenghualei/p/16801620.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性