vue组件中name的作用（命名组件）

最新推荐文章于 2023-05-21 15:52:59 发布

陈吖

最新推荐文章于 2023-05-21 15:52:59 发布

阅读量2k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_47230378/article/details/126928088

版权

本文介绍了Vue组件中name属性的四个关键作用：在keep-alive时用于过滤，递归组件迭代时的标识，调试时提供更清晰的组件名称，以及在注册组件时的引用方式。通过具体例子和代码展示，阐述了name属性在实际开发中的应用场景。

摘要由CSDN通过智能技术生成

vue组件中name的作用

作用一：当使用keep-alive时，可以使用这个name进行过滤

export default {
   
  name:'Home'
}，
mounted(){
   
  this.getInfo();
}，
methods:{
   
  getInfo(){
   
     axios.get('/xx/home.json',{
   
       params:{
   
        id:this.$route.params.id
       }
     }).then(this.getInfoSuccess)
   }
}

使用keep-alive后，第二次进入页面时不会触发mounted()函数，此时想要进行数据请求可以使用activated()函数，也可以利用这个name属性增加一个过滤器

<div

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陈吖

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue 中 name 属性的作用

chenyajundd的博客

01-19

534

在实际开发中，如果组件没有涉及递归调用，name属性并不是必须的。但是，为了更好地组织和调试代码，给组件设置一个有意义的name是一个良好的实践。另外，使用name属性还可以在Vue开发工具中更容易地定位组件。在浏览器的开发者工具中，你可以通过检查Vue组件实例的属性来获取组件的名称。

递归组件使用--（慕课网-去哪儿网）

yanhailun的博客

10-12

208

所谓的递归组件就是在组件中调用自身组件在我们写项目的时候，一般后台返回给我的数据都是嵌套的，类似于下面这种：而有的时候我们需要将二级列表或者三级列表全部显示在页面中，这个时候我们就可以使用递归组件了在Detail组件中，我们引用了detail-list组件，并且传了个参数list， //Detail.vue <template> <div class="detail"...

2 条评论您还未登录，请先登录后发表或查看评论

vue页面缓存

weixin_42293628的博客

07-31

808

首先说一下缓存的使用场景，比如一个管理端的项目从列表页编辑进入详情页再次返回列表页时要保留之前的状态，又比如我们要缓存某些表单页面。这些都可以通过路由容器的keep-alive方法来实现。下面我们来说一下它的实现原理。首先我们要先在路由容器里面设置一个include属性(缓存多个组件逗号隔开即可)，把你要缓存的路由组件name添加到这里来就可以了，要注意的就是我们的路由对应的组件name一定要...

Vue组件中name的三大作用

最新发布

weixin_58414196的博客

05-21

261

vue组件name的作用小结

08-27

很多开发者在编写 Vue 项目时，会遇到给组件命名的各种问题，本文将通过详细的示例，来介绍 Vue 组件 name 的作用，并解释其在不同场景下的用途。使用 keep-alive 进行缓存过滤在使用 keep-alive 时，可以搭配...

在Vue中获取组件声明时的name属性方法

10-18

console.error(`${this.$options.name} 组件中，以下图片链接不存在，或无法打开：${url}`); // 可以在这里添加一个上报的Ajax请求 // ... do some code } ``` 这种方法不仅简化了代码，还使得错误处理更加灵活...

深入解析Vue 组件命名那些事

08-29

Vue组件命名规则与实践在前端开发领域，Vue.js框架因其响应式和组件化的特点受到了...在实践中，开发者应该结合项目需求、团队习惯和个人偏好，选择最合适的方式来命名组件，从而构建出结构清晰、维护方便的Vue应用。

vue 组件 name属性的作用

imkaifan的博客

06-02

1336

每次封装组件的时候都会给组件起一个：name 但是呢，我们大多数情况下又没用过这个属性，当你用浏览器vue调试插件的时候可能会看到你起的组件name，便于调试，其实这个那么属性的作用远不止如此。组件是有name属性的，匹配的就是组件的name。和vue-router中配置的name是不同的含义。 vue-router中name属性更多的就是指代作用，和地址关联起来，不用一直写相对地址 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤配置<keep-alive>标签的e

vue学习之vue组件中name的作用

King的博客

07-23

1530

vue组件中name的作用 export default { name:'xxx' } 作用一：当项目使用keep-alive时，可搭配组件name进行缓存过滤 <div id="app"> <keep-alive exclude="Detail"> <router-view/> </keep-alive> </div> 作用二：做递归组件代码如下： //Detail.vue组件 <template> &

vue--name的作用

Ada_lake的博客

09-03

277

vue中name 的作用递归组件使用name进行自身递归的调用对keep-alive页面取消缓存，通过name取消 vue 调试插件进行调试时，会显示组件名，便于调试

vue组件名name的作用

qq_42453238的博客

04-07

322

keep-alive 在判断组件是否需要缓存的时候，进行正则匹配/名称匹配的时候，就是根据组件的名称来进行判断的便于调试，有名字的组件可以有更清晰的警告信息，在vue-devtools中也会显示组件名，可以观察到更有语义化的组件树组件调用自己，完成递归组件的实现 ...

vue中组件name的作用

口袋的天空的博客

05-31

481

vue中组件name的作用转载：https://blog.csdn.net/Uookic/article/details/80420472 我们在写vue项目的时候会遇到给组件命名这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的 export default { name:'xxx' } 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤举个例子：我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载 e

vue中组件的name属性含义与用法

The_Lucky_one的博客

08-24

9918

name属性：只有作为组件选项时起作用，用来**注册组件名**

vue 文件中 name 的作用

qq_36416878的博客

05-28

5927

export default { name:'xxx'}name的作用有三个：1、当项目使用keep-alive时，可搭配组件name进行缓存过滤<div id="app"> <keep-alive exclude="xxx"> <router-view/> </keep-alive></div>exclude=&quot

vue组件上name作用，能否重复

05-02

在 Vue 组件中，name 属性用于组件的名称标识。它在组件的递归调用和在 DevTools 工具中用于组件的识别时非常有用。通常，建议为每个组件设置一个唯一的名称以避免命名冲突。在同一个 Vue 应用程序中，组件的名称不能重复。如果重复了，Vue 会发出警告并且只有最后一个组件会被注册。但是，如果使用了不同的命名空间，那么可以使用相同的名称。例如，可以在全局注册组件时使用命名空间，如下所示： ``` Vue.component('my-component', { // ... }) Vue.component('your-component', { // ... }) ``` 在这个例子中，即使两个组件使用了相同的名称，由于它们属于不同的命名空间，它们仍然可以正常工作。但是建议还是尽量避免使用相同的名称，以防止出现不必要的混淆。