vue組件name的介紹

大家在寫vue專案的時候會遇到給組件的各種命名，接下來透過本文給大家分享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中增加一個過濾，如下圖：

 <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:&#39;DetailList&#39;,//递归组件是指组件自身调用自身
  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決定的

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

vue單一元件實作無限層級多重選擇選單功能的介紹

使用Vue自訂數字鍵盤元件的方法

以上是vue組件name的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！