溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們在寫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"
}]
迭代的結果如下：
3.當你用vue-tools時
vue-devtools調試工具里顯示的組見名稱是由vue中組件name決定的
總結
以上所述是小編給大家介紹的vue組件name的作用小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
