组件写 name 有啥好处？

组件递归与name属性：调试优化利器
最新推荐文章于 2025-05-07 23:25:42 发布
原创 最新推荐文章于 2025-05-07 23:25:42 发布 · 186 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了在前端开发中，为组件添加name属性如何实现递归调用，并强调它在调试和定位组件，特别是在keep-alive的include和exclude策略中的关键作用。name属性帮助区分缓存策略，提升应用的可维护性和调试效率。

增加 name 属性，可以实现组件递归调⽤自身，调用的时候用的就是 name 名字

可以表示组件的具体名称，⽅便调试和查找对应的组件 比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的

【壹题】【个人理解】写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
qq_40299140的博客
09-06 440
没有去看过React 所以只讨论在vue的情况下。 首先个人的观点，增加key并不是为了提升遍历的效率，这只和具体的操作相关。增加key的目的是给元素添加唯一标识，让vue通过映射能够准确标识每个元素，例如对一个数组进行修改时，在不加key的情况下会对整个dom节点进行修改，加key的会通过vnode进行比较，对有差异的局部进行修改。 var vm = new Vue({ el: '#a...
在导出Vue组件对象时export default里的name属性值要和对应的.vue文件名称一致吗？
adminstate的博客
02-20 711
在导出Vue组件对象时export default里的name属性值要和对应的.vue文件名称一致吗？
组件中写 name 选项有什么作用
yezi153的博客
11-10 1394
写name选项的作用总共有三条，具体如下： 1, 项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤 2, DOM 做递归组件时需要调用自身 name 3, Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 name 决定的 ...
组件中写 name 选项有什么作用？（总结Vue的一些知识点）
cvvvvvvvvvv的博客
11-05 821
1.当项目使用keep-alive时 移除keep-alive状态下组件自动缓存功能 我们在App.vue中使用了keep-alive导致我们第二次进入的时候页面不会重新请求ajax，因为mounted() 钩子函数只会执行一次。 有两个解决方案,一个增加activated()函数,每次进入新页面的时候再获取一次数据。 还有个方案就是在keep-alive中增加 exclud=“name”，移除选中页面的缓存 2.DOM做递归组件时 一个组件要用自己的时候，可以通过自己的名字来使用自己。 比如说d.
vue组件name的作用小结
12-09
1.当项目使用keep-alive时，可搭配组件name进行缓存过滤  举个例子：  我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载 export default { name:'Detail' }， mounted(){ this....
如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
日常分享工作中的一些技术干货。
05-14 857
如何使用Vue集成其它UI组件前言一、Vant是什么？二、基础环境准备1.1 了解是根本1.2 安装1.3 引入组件3.1 步骤一3.2 步骤二3.3 步骤三二、事件绑定2.1 引入2.2 编写页面代码2.3 通用Events事件三、参数传递总结 前言 首先，我是一个全栈小白，我的前端很菜，我本就是一个后端开发者，凭啥写前端的东西，我也很纳闷，公司本来说我写接口就可以了，然而呢？生活就是如此，套路啊！你可以不信我的教程，但不能不相信官网，哈哈哈，很多初学vue的小伙伴，肯定会有这样的疑问，如何使用Vue集
什么是Nacos？？?Nacos是干啥的？？？如何使用Nacos？？？
欢迎来到Mn_Hz的小博站
07-14 1386
Nacos一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台
React 播客专栏 Vol.6｜TypeScript 是什么？为啥写 React 要加它？
最新发布
前端达人
05-07 1076
TS 会立马在编辑器标红，说：“嘿，你这是把字符串当数字用了！TypeScript，简称 TS，是由微软打造的 JavaScript 超集。你改一个组件名、改一个接口字段名，TS 会全项目跟踪提醒你改哪里，不怕改崩项目。你所有能写的 JS 代码在 TS 里都能写，只不过它多了个强大武器：类型系统。正文内容为学习笔记摘要，音频内容是详细的解读，方便你理解），请点击下方收听。🔍 第一部分：认识 TypeScript，这个“超集”是个啥？🔍 第一部分：认识 TypeScript，这个“超集”是个啥？
[vue] 组件中写name选项有什么作用？
歌谣的博客
03-05 1249
[vue] 组件中写name选项有什么作用？ 项目使用keep-alive时，可搭配组件name进行缓存过滤 DOM做递归组件时需要调用自身name vue-devtools调试工具里显示的组见名称是由vue中组件name决定的 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
组件写name有啥好处？
gzz888的博客
04-26 221
增加 name 属性，可以实现组件递归调⽤自身，调用的时候用的就是 name 名字 可以表示组件的具体名称，⽅便调试和查找对应的组件 比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的 ...
Vue组件中name的三大作用
热门推荐
铁锤妹妹的博客
11-04 1万+
一直不太清楚写vue项目的时候遇到给组件命名name值是干嘛用的，一直以为没啥用，直到今天接触到了与name属性相关的些东西才感觉它的用处挺多的。 作用一：递归组件 一个组件要用自己的时候，可以通过自己的名字来使用自己。 list.vue <div> <div class="item" v-for="(item, index) in list" :key="index"> <div class="item-title border-bottom">
递归组件使用--（慕课网-去哪儿网）
yanhailun的博客
10-12 271
所谓的递归组件就是在组件中调用自身组件 在我们写项目的时候，一般后台返回给我的数据都是嵌套的，类似于下面这种： 而有的时候我们需要将二级列表或者三级列表全部显示在页面中，这个时候我们就可以使用递归组件了 在Detail组件中，我们引用了detail-list组件，并且传了个参数list， //Detail.vue <template> <div class="detail"...
组件写name的好处
GikQxx21_wen的博客
04-27 393
组件写 name 有啥好处 增加 name 属性，可以实现组件递归调⽤自身，调用的时候用的就是 name 名字 可以表示组件的具体名称，⽅便调试和查找对应的组件 比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的 ...
vant的picker组件，传值为对象数组，colunmsFieldNames属性
qq_46416934的博客
03-03 1704
// 组件用法 colunmsFieldNames:用来确定展示内容的键（picker里面默认展示键text的值），具体用法如下： <van-picker title=“标题” :columns=“columns” @change=“onChange” :colunmsFieldNames="{text:‘name’}"/> // script <script setup lang="ts"> const columns = reactive([[ {
antd Form.Item的name是数组时如何取值
qq_36723092的博客
07-11 7240
antd Form.Item的name是数组时如何取值
antd v4动态表单嵌套结构及更新他的值的方法
寬真
04-23 3363
一、查看antd文档发现表单项的值不能通过设置状态来更新，我们应该使用form.setFieldValue来更新 antd v4动态表单setFieldsValue如何设置嵌套路径的值？ https://segmentfault.com/q/1010000023608785?utm_source=tag-newest formItem是动态渲染出来的，所以此处的listIndex 是一个变量， 数据结构为： data:{ list:[ {name:'111'}, ...
这里里面的name有啥用
06-13
如果指定的是一个带有 `name` 属性的配置，那么在渲染时，该属性的值就会被替换成该路由的实际路径。 例如下面的代码会生成一个链接，点击后会跳转到名为 `Home` 的路由： ```html <router-link :to="{ name: '...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值