快捷導(dǎo)航

vue組件name的作用小結(jié)

更新時(shí)間：2018年05月23日 15:49:28 作者：Qin__

大家在寫vue項(xiàng)目的時(shí)候會(huì)遇到給組件的各種命名，接下來(lái)通過(guò)本文給大家分享vue組件name的作用小結(jié)，感興趣的朋友跟隨腳本之家小編一起看看吧

我們?cè)趯憊ue項(xiàng)目的時(shí)候會(huì)遇到給組件命名

這里的name非必選項(xiàng)，看起來(lái)好像沒(méi)啥用處，但是實(shí)際上這里用處還挺多的

 export default {
   name:'xxx'
}

1.當(dāng)項(xiàng)目使用keep-alive時(shí)，可搭配組件name進(jìn)行緩存過(guò)濾

舉個(gè)例子：

我們有個(gè)組件命名為detail,其中dom加載完畢后我們?cè)阢^子函數(shù)mounted中進(jìn)行數(shù)據(jù)加載

export default {
  name:'Detail'
}，
mounted(){
  this.getInfo();
}，
methods:{
  getInfo(){
     axios.get('/xx/detail.json',{
       params:{
        id:this.$route.params.id 
       }
     }).then(this.getInfoSucc)
   }
 }

因?yàn)槲覀冊(cè)贏pp.vue中使用了keep-alive導(dǎo)致我們第二次進(jìn)入的時(shí)候頁(yè)面不會(huì)重新請(qǐng)求，即觸發(fā)mounted函數(shù)。

有兩個(gè)解決方案,一個(gè)增加activated()函數(shù),每次進(jìn)入新頁(yè)面的時(shí)候再獲取一次數(shù)據(jù)。

還有個(gè)方案就是在keep-alive中增加一個(gè)過(guò)濾，如下圖所示：

 <div id="app"> 
  <keep-alive exclude="Detail">
   <router-view/>
  </keep-alive>
 </div>

2.DOM做遞歸組件時(shí)

比如說(shuō)detail.vue組件里有個(gè)list.vue子組件，遞歸迭代時(shí)需要調(diào)用自身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',//遞歸組件是指組件自身調(diào)用自身
  props:{
    list:Array
  }
}
</script>

list數(shù)據(jù)：

const list = [{
     "title": "A",
     "children": [{
      "title": "A-A",
      "children": [{
       "title": "A-A-A"
      }]
     },{
        "title": "A-B"
     }]
    }, {
     "title": "B"
    }, {
     "title": "C"
    }, {
     "title": "D"
    }]

迭代的結(jié)果如下：