vue組件name的作用

我們在寫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>

廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com

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決定的