单页面组件中 name 的作用

最新推荐文章于 2022-09-26 10:16:00 发布
原创 最新推荐文章于 2022-09-26 10:16:00 发布 · 349 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Vue中使用组件模板递归调用时设置name属性的必要性，它不仅有助于调试，还能在keep-alive中精准过滤。通过实例说明，提升组件在devtools中的可识别性。

    1 、 允许组件模板递归地调用自身： 也就是 A 单文本文件 定义了name : 'chen', 则在A 页面中可以直接使用<chen></chen> 这个组件进行递归调用

    2、  便于调试 （包括警告信息以及通过vue-devtools调试时可以更方便的定位到组件），因为使用vue-devtools时会显示该组件的name名，如果没有name,调式的时候显示的是Anonymous
    
    3 、 用于keep-alive 进行 include / exclude 过滤

Hua_explore
关注
vue3 页面引入组件
信徒博客
07-18 700
注意这里的 name: "Rabbitmq"，要与下面引用的时候一致。坑二、路径不要写错了。
【vue2.0入门】vue单文件组件
qbbmnnnnnn的博客
11-08 1999
以.vue为后缀的文件，一般都包含三个区域template、script、style，分别对应原生前端开发的html、js、css三个部分，比较符合一开始做前端开发的编码习惯。以上即为vue单文件组件常用的内容，有了这些内容做支撑，加上你原有的html、js、css的基础知识，就可以在vue项目中编写页面了。在开发时需要贯彻组件化开发思想，从项目整体设计的维度以及单一功能的维度共同考虑，抽离出合适的组件，互相拼凑完成页面编写。在下篇中，我会结合应用场景讲解如何使用vue的语法技巧，帮助你更快的进行页面编写。
组件中的name属性的作用
04-27 428
1.可以作为DOM组件作为递归调用使用 例如：一个组件名为aa.vue name="aaa" 在aa.vue组件中 <aaa></aaa>就是调用aa.vue组件自己
组件中写 name 选项有什么作用
yezi153的博客
11-10 1398
写name选项的作用总共有三条，具体如下： 1, 项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤 2, DOM 做递归组件时需要调用自身 name 3, Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 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">
vue 组件属性 name的作用
qq_42449028的博客
04-15 683
组件是有name属性的，匹配的就是组件的name。和vue-router中配置的name是不同的含义。 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤 配置标签的exclude或者include属性做组件筛选 实例： 2.DOM做递归组件时 在自身组件调用自身的时候，可以通过定义name的值进行递归调用 实例： {{item.title}} <script> export default { name:'DetailList',//递
组件中写 name 选项有什么作用？（总结Vue的一些知识点）
cvvvvvvvvvv的博客
11-05 824
1.当项目使用keep-alive时 移除keep-alive状态下组件自动缓存功能 我们在App.vue中使用了keep-alive导致我们第二次进入的时候页面不会重新请求ajax，因为mounted() 钩子函数只会执行一次。 有两个解决方案,一个增加activated()函数,每次进入新页面的时候再获取一次数据。 还有个方案就是在keep-alive中增加 exclud=“name”，移除选中页面的缓存 2.DOM做递归组件时 一个组件要用自己的时候，可以通过自己的名字来使用自己。 比如说d.
在Vue中获取组件声明时的name属性方法
10-18
每个组件都有自己的独立作用域和配置，其中`name`属性是一个非常有用的选项，它允许我们为组件提供一个标识符。这个标识符在调试、日志记录或者在需要动态引用组件时特别有用。本文将详细介绍如何在Vue中获取组件...
Vue传参一箩筐(页面、组件)
10-17
在Vue框架中，页面与组件之间的数据传递是十分常见的需求，尤其在构建复杂的应用时。本文将详细讲解几种常见的Vue传参方法，包括路由传参、属性传递等，以帮助开发者更好地理解和应用。 首先，我们关注的是路由传参...
angular实现spa单页面应用实例
08-30
在本篇文章中，我们将详细介绍如何使用 Angular 实现 SPA 单页面应用实例。SPAingle Page Application)，是一种特殊的 Web 应用程序，它可以在不重新加载整个页面的情况下，动态地更新页面内容，从而提供了流畅的...
组件写 name 有啥好处？
lk19910323的博客
04-26 174
增加 name 属性，可以实现组件递归调⽤自身，调用的时候用的就是 name 名字 可以表示组件的具体名称，⽅便调试和查找对应的组件 比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的 ...
vue组件中name的使用
杨咩咩
07-14 2609
vue组件中name的作用： export default { name: 'App' } 1.组件递归时使用 2.设置组件不使用keep-alive缓存时使用 3.调试代码
组件写name的好处
GikQxx21_wen的博客
04-27 401
组件写 name 有啥好处 增加 name 属性，可以实现组件递归调⽤自身，调用的时候用的就是 name 名字 可以表示组件的具体名称，⽅便调试和查找对应的组件 比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的 ...
$refs 、$nextTic、动态组件、name的使用
idiot_MAN的博客
09-26 676
我们封装的组件，可以自己定义name属性组件名 让使用者有个统一的前缀风格。使用vue内置的keep-alive组件，可以让包裹的组件保存在内存中不被销毁。​ Vue内置的keep-alive组件，包裹要频繁切换的组件。vue内置component组件，配合is属性，设置要显示的组件。使用keep-alive内置的vue组件，让动态组件缓存。组件切换会导致组件被频繁的销毁和重新创建，性能不高。多个组件使用一个挂载点，并动态切换，就是动态组件。可以用组件的name属性值，来注册。
vue组件中name的作用（命名组件）
qq_47230378的博客
09-19 2229
作用三：vue-tools调试时，如果使用设置了name属性，那么控制台里显示的是设置的名字，否则显示组件名。信息来源：https://www.cnblogs.com/wuqilang/p/13718924.html。作用一：当使用keep-alive时，可以使用这个name进行过滤。作用二：递归组件（组件自己调用自己）中迭代时需要调用自身的name。使用Vue.use()注册组件，将来该组件使用时就可以这样写。这两种写法都可以生效。
vue学习之vue组件中name的作用
King的博客
07-23 1613
vue组件中name的作用 export default { name:'xxx' } 作用一：当项目使用keep-alive时，可搭配组件name进行缓存过滤 <div id="app"> <keep-alive exclude="Detail"> <router-view/> </keep-alive> </div> 作用二：做递归组件 代码如下： //Detail.vue组件 <template> &
08|理解单文件组件
name_sakura的博客
03-03 385
文章目录 aaa
【vue关于组件name的用法学习】
wjj的博客
10-24 620
问题描述： 第一次进入界面，页面走vue的生命周期（走初始化的所有方法），没问题。当从其他页面返回/点击进入到这个界面时，该页面没有刷新，没有走vue的生命周期（走初始化的所有方法），数据没有发生变化，就好像是页面做了缓存一样. 我们在写vue项目的时候会遇到给组件命名，这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的！！！ export default { name:...
vue3 单页面组件的使用
最新发布
03-25
嗯，用户让我介绍一下Vue3单页面组件的使用。首先，我需要确定用户对Vue的基础知识了解多少。可能他们已经有Vue2的经验，或者完全是新手。不过问题里提到的是Vue3，所以应该重点放在Vue3的新特性上，比如Composition...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值