vue组件name的作用小结


Posted in Javascript onMay 23, 2018

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

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

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"
    }]

迭代的结果如下:

vue组件name的作用小结

3.当你用vue-tools时

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

vue组件name的作用小结

总结

以上所述是小编给大家介绍的vue组件name的作用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript面向对象之四 继承
Feb 08 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
基于node.js制作简单爬虫教程
Jun 29 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
linux 后台运行node服务指令方法
May 23 #Javascript
node.js部署之启动后台运行forever的方法
May 23 #Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
让Vue也可以使用Redux的方法
May 23 #Javascript
微信小程序排坑指南详解
May 23 #Javascript
关于vue-router的那些事儿
May 23 #Javascript
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
加拿大探亲邀请信
2014/01/28 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
绵山导游词
2015/02/05 职场文书
保护地球的宣传语
2015/07/13 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python