我们在写vue项目的时候会遇到给组件命名

这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的

1
2
3
export default {
   name:'xxx'
}

1.当项目使用keep-alive时,可搭配组件name进行缓存过滤

举个例子:

我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载

export default {
name:'Detail'
},
mounted(){
this.getInfo();
},
methods:{
getInfo(){
axios.get('/xx/detail.json',{
params:{
id:this.$route.params.id
}
}).then(this.getInfoSucc)
}
}

因为我们在App.vue中使用了keep-alive导致我们第二次进入的时候页面不会重新请求,即触发mounted函数。

有两个解决方案,一个增加activated()函数,每次进入新页面的时候再获取一次数据。

还有个方案就是在keep-alive中增加一个过滤,如下图所示:

<div id="app">
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
</div>

2.DOM做递归组件时

比如说detail.vue组件里有个list.vue子组件,递归迭代时需要调用自身name

list.vue:

<div>
<div v-for="(item,index) of list" :key="index">
<div>
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" >
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
<script>
export default {
name:'DetailList',//递归组件是指组件自身调用自身
props:{
list:Array
}
}
</script>

list数据:

const list = [{
"title": "A",
"children": [{
"title": "A-A",
"children": [{
"title": "A-A-A"
}]
},{
"title": "A-B"
}]
}, {
"title": "B"
}, {
"title": "C"
}, {
"title": "D"
}]

迭代的结果如下:

3.当你用vue-tools时

vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

 

.

vue组件name的作用小结的更多相关文章

  1. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  2. [vue]组件的导入

    参考: http://vue2.mmxiaowu.com/article/584a3957fc007e72b0f576d9 vue组件的注册 1.通过components方式注册 2.通过router ...

  3. 封装Vue组件的一些技巧

    封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...

  4. vue组件开发练习--焦点图切换

    1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...

  5. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  6. Vue 组件之 Router

    Vue 组件之 Router Vue 开发单页应用的时候,免不了使用Vue组件.在单页应用上如何进行组件切换? 结构如下图所示: 主页面包含Foo组件与Bar组件,在主页面中可以进行Foo与 Bar的 ...

  7. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  8. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  9. 深入理解 Vue 组件

    深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. 通过存储过程(SP)实现SQL Server链接服务器(LinkServer)的添加

    1. 背景 当系统的微服务化做的不是很高的时候,部分功能要通过DB LinkServer 来实现跨 Server 查询,当然,有时候BI抽数据.DBA数据库维护可能也会创建LinkServer. 特别 ...

  2. 使用docker-compose安装wordpress

    一.建立应用的目录 mkdir my_wordpress cd my_wordpress 二.创建 docker-compose.yml touch docker-compose.yml;vi doc ...

  3. Day8 - Python基础8 异常处理、反射、单例模式

    本节内容: 1:异常处理 2:反射 3:单例模式 1.异常处理  1.异常简介 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户 ...

  4. acwing 23. 矩阵中的路径

    习题地址 https://www.acwing.com/problem/content/description/21/ 题目描述请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路 ...

  5. python pyquery 基本用法

    1.安装方法 pip install pyquery 2.引用方法 from pyquery import PyQuery as pq 3.简介 pyquery 是类型jquery 的一个专供pyth ...

  6. 4.P1产品经理该如何学习提升

    0经验.想转型 对于想转型或者没有经验的人,这部分同学你肯定对产品本身有一定的了解了,但是在这个时候转型最痛苦的是你要从原来的工作转到一个新的工作中的时候,要回到一个原点.比如你是原来是做开发的,那么 ...

  7. SP1043 GSS1 - Can you answer these queries I 线段树

    问题描述 LG-SP1043 题解 GSS 系列第一题. \(q\) 个询问,求 \([x,y]\) 的最大字段和. 线段树,维护 \([x,y]\) 的 \(lmax,rmax,sum,val\) ...

  8. BoW算法及DBoW2库简介(二)

    一.BoW算法 用OpenCV实现了最简单的BoW算法进行了一次小规模的图像检索任务,使用UKbench数据库,算法原理和网上的描述差不多,使用K-means算法进行聚类,这里使用KDTree算法进行 ...

  9. MacOS命令行打包+签名+公证+生成dmg文件

    关于dmg文件是什么,和为什么要进行公证? 简单说下,dmg文件就是一个可直接在mac上安装的安装包,我自己的理解是就像windows上的exe安装包一样: 公证是将app传到苹果商店去做认证,如果不 ...

  10. SpringBoot系列之快速创建项目教程

    本博客简介一下SpringBoot快速创建工程的方法,主要介绍一下Spring Initializer,Spring Initializer是IntelliJ IDEA才集成的一种快速创建Spring ...