Vue组件name的作用小结

发表于 | 分类于

我们在写 vue 项目的时候会遇到给组件命名
这里的 name 非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的

1
2
3
export default {
  name:'xxx'
}

当项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤

举个例子：
我们有个组件命名为 detail,其中 dom 加载完毕后我们在钩子函数 mounted 中进行数据加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 中增加一个过滤，如下图所示：

1
2
3
4
5
<div id="app">
  <keep-alive exclude="Detail">
    <router-view />
  </keep-alive>
</div>

DOM 做递归组件时

比如说 detail.vue 组件里有个 list.vue 子组件，递归迭代时需要调用自身 name
list.vue：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
  <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>
<template/>
<script>
const list = [
  {
    "title": "A",
      "children": [
        {
          "title": "A-A",
            "children": [
              {
                "title": "A-A-A"
                }
            ]
        },{
          "title": "A-B"
      }
    ]
  },
  {
    "title": "B"
  },{
    "title": "C"
  },{
    "title": "D"
  }
]

export default {
  name:'DetailList',  // 递归组件是指组件自身调用自身
  props:{
    list:list
  }
}
</script>

迭代的结果如下：

1
2
3
4
5
6
7
A
  A-A
    A-A-A
  A-B
B
C
D

当你使用 vue-tools 时

vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的