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错误的认识不用关心内存管理
Dec 15 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 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
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python算术运算符实例详解
2017/05/31 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python日期相关操作实例小结
2019/06/24 Python
Python PO设计模式的具体使用
2019/08/16 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
Python面向对象编程基础实例分析
2020/01/17 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
初中生评语大全
2014/04/24 职场文书
教师暑期培训感言
2014/08/15 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle