vue組件name的做用小結

咱們在寫vue項目的時候會遇到給組件命名vue

 這裏的name非必選項,看起來好像沒啥用處,可是實際上這裏用處還挺多的ios

?
1
2
3
export default {
    name: 'xxx'
}

1.當項目使用keep-alive時,可搭配組件name進行緩存過濾json

 舉個例子:axios

 咱們有個組件命名爲detail,其中dom加載完畢後咱們在鉤子函數mounted中進行數據加載緩存

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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函數。app

 有兩個解決方案,一個增長activated()函數,每次進入新頁面的時候再獲取一次數據。dom

 還有個方案就是在keep-alive中增長一個過濾,以下圖所示:函數

?
1
2
3
4
5
<div id= "app" >
  <keep-alive exclude= "Detail" >
   <router-view/>
  </keep-alive>
</div>

2.DOM作遞歸組件時工具

 好比說detail.vue組件裏有個list.vue子組件,遞歸迭代時須要調用自身namethis

list.vue:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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數據:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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決定的

 

相關文章
相關標籤/搜索