快捷導(dǎo)航

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

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

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

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

這里的name非必選項，看起來好像沒啥用處，但是實際上這里用處還挺多的

 export default {
   name:'xxx'
}

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

舉個例子：

我們有個組件命名為detail,其中dom加載完畢后我們在鉤子函數(shù)mounted中進行數(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)
   }
 }

因為我們在App.vue中使用了keep-alive導(dǎo)致我們第二次進入的時候頁面不會重新請求，即觸發(fā)mounted函數(shù)。

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

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

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

2.DOM做遞歸組件時

比如說detail.vue組件里有個list.vue子組件，遞歸迭代時需要調(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é)果如下：

3.當你用vue-tools時

vue-devtools調(diào)試工具里顯示的組見名稱是由vue中組件name決定的

總結(jié)

以上所述是小編給大家介紹的vue組件name的作用小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue 添加和編輯用同一個表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個表單,el-form表單提交后清空表單數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue?WebPack忽略指定文件或目錄方式
這篇文章主要介紹了Vue?WebPack忽略指定文件或目錄方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue實現(xiàn)圖片上傳功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
Nginx部署前端vue項目的全部步驟記錄
本文講解了如何在Linux環(huán)境中部署Vue項目,包括安裝依賴、編譯項目、安裝配置Nginx,并介紹了SSL證書安裝與配置,詳細說明了使用Nginx作為靜態(tài)資源服務(wù)器和反向代理的步驟,以及進行性能、安全性測試和備份的重要性,需要的朋友可以參考下
2024-09-09
如何在Vue項目中添加接口監(jiān)聽遮罩
這篇文章主要介紹了如何在Vue項目中添加接口監(jiān)聽遮罩,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
vue2升級vue3問題bug解決分析整理
這篇文章主要介紹了vue2升級vue3遇到的問題bug解決分析整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10
vue.js2.0點擊獲取自己的屬性和jquery方法
下面小編就為大家分享一篇vue.js2.0點擊獲取自己的屬性和jquery方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
某些場景下建議vue query代替pinia原理解析
這篇文章主要為大家介紹了某些場景下建議vue-query代替pinia原理解析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
35個最好用的Vue開源庫(史上最全)
無論是開發(fā)新手還是經(jīng)驗豐富的老手，我們都喜歡開源軟件包。本文主要介紹了35個最好用的Vue開源庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-01-01
如何修改Vue項目運行的IP和端口
這篇文章主要介紹了修改Vue項目運行的IP和端口的方法，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-02-02