vue組件name的作用小結

2019-11-19 13:47:22

字體：大中小

來源：轉載

供稿：網友

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

迭代的結果如下：