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获取当前日期时间及其它操作函数
Jan 11 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
Boostrap入门准备之border box
May 09 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
win7安装python生成随机数代码分享
2013/12/27 Python
分享Python文本生成二维码实例
2016/01/06 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
青年教师培训方案
2014/02/06 职场文书
旷课检讨书1000字
2014/02/14 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
python中使用redis用法详解
2022/12/24 Redis