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 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
python计算时间差的方法
2015/05/20 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
OpenCV 模板匹配
2019/07/10 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Pytorch之parameters的使用
2019/12/31 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
企业项目策划书
2014/01/11 职场文书
大学总结自我鉴定
2014/01/18 职场文书
学用政策心得体会
2014/09/10 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
2015年中秋寄语
2015/07/31 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL