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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
javascript中caller和callee详解
Aug 10 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
关于element的表单组件整理笔记
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
mysql建立外键
2006/11/25 PHP
使用php来实现网络服务
2009/09/15 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
ext jquery 简单比较
2010/04/07 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
纯javascript版日历控件
2016/11/24 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
Vue.js用法详解
2017/11/13 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Django中使用Celery的方法步骤
2020/12/07 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
应届生幼儿园求职信
2013/11/12 职场文书
办公室前台岗位职责
2014/01/04 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
市场拓展计划书
2014/05/03 职场文书
忠诚教育心得体会
2014/09/03 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
Python机器学习之基础概述
2021/05/19 Python
python单元测试之pytest的使用
2021/06/07 Python