我們在寫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中增加一個過濾，如下圖所示：
<p id="app"> <keep-alive exclude="Detail"> <router-view/> </keep-alive> </p>
2.DOM做遞歸組件時
比如說detail.vue組件里有個list.vue子組件，遞歸迭代時需要調用自身name
list.vue:
<p>
<p v-for="(item,index) of list" :key="index">
<p>
<span class="item-title-icon"></span>
{{item.title}}
</p>
<p v-if="item.children" >
<detail-list :list="item.children"></detail-list>
</p>
</p>
</p>
<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決定的
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2023 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
