本文记录一下Vue模板下name的实际意义
好奇name是干什么用的
- vue的模板上边的name
1
2
3
4
5
6
7
8
9
10
11<script type="text/ecmascript-6">
export default {
name: 'DetailList',
data(){
return {
}
},
methods: {},
};
</script>第一点name可以做递归组件 调用自身
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<template>
<div>
<div class="item" v-for="(item,index) of list" :key="index">
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" class="item-chilren" >
/*调用自身name*/
<DetailList :list="item.children"></DetailList>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
//组件上也可以写<detail-list></detail-list>
name: 'DetailList',
props:{
list:Array,
},
data(){
return {
}
},
methods: {},
};第二点可以告诉keep-alive哪个组件不缓存
- 正常情况下我们不想每次切换页面就再次请求需要在路由身上加上keep-alive缓存，但是这样就所有页面请求一次就不会再次请求了
1
2
3<keep-alive exclude="Detail">
<router-view></router-view>
</keep-alive> - exclude=”Detail” name为Detail的组件不缓存数据
