我們在寫Vue項(xiàng)目的時候會遇到給組件命名财岔， 這里的name非必選項(xiàng)截汪，看起來好像沒啥用處廊遍，但是實(shí)際上這里用處還挺多的兢仰。
export default {
name:'xxx'
}
- 當(dāng)項(xiàng)目使用keep-alive時
使用keep-alive進(jìn)行組件緩存時乍丈，組件必須有自己的name，不然無效把将。
-
DOM做遞歸組件時
比如說detail.vue組件里有個list.vue子組件轻专，遞歸迭代時需要調(diào)用自身name：
list.vue：
<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>
export default {
name:'detailList',//遞歸組件是指組件自身調(diào)用自身
props:{
list:Array
}
}
</script>
list數(shù)據(jù)：
const list = [{
"title": "A",
"children": [{
"title": "A-A",
"children": [{
"title": "A-A-A"
}]
},{
"title": "A-B"
}]
}, {
"title": "B"
}, {
"title": "C"
}, {
"title": "D"
}]
迭代的結(jié)果如下：
-
當(dāng)你用vue-tools時
vue-devtools調(diào)試工具里顯示的組見名稱是由vue中組件name決定的：
