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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
树结构之JavaScript
Jan 24 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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原理的opcodes(操作码)
2010/10/26 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
盘点提高 Python 代码效率的方法
2014/07/03 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python实现QQ批量登录功能
2019/06/19 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Python生成器generator原理及用法解析
2020/07/20 Python
中专生毕业自我鉴定
2013/11/01 职场文书
电子信息工程自荐信
2014/05/26 职场文书
医院节能减排方案
2014/06/13 职场文书
计算机实训报告范文
2014/11/05 职场文书