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>

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的總結。