【Vue】vue 組件屬性 name的作用

轉自：https://www.cnblogs.com/jiaoshou/p/13415259.html

我們在寫vue項目的時候都會給組件命名，這里的name非必選項。

export default {
      name:'xxx'
}

**官方文檔指出：name只有作為組件選項時起作用。 **

常見的幾種用途
1.組件遞歸操作
vue允許組件模板調用自身，這在日常需求中也時有出現，此時我們就可以根據組件的name，來進行操作。
例：

         <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>

2.配合keep-alive對組件緩存做限制（include/exclude="name"）
我們知道 keep-alive的 include和exclude 允許有條件的對組件進行緩存,其中include和exclude所匹配的就是組件的name值。
實例：

<!-- 把除了組件名是 Liantong,Dianxin 的組件緩存起來 -->
<keep-alive exclude="Liantong,Dianxin">
  <router-view></router-view>
</keep-alive>

3、在dev-tools中使用
在開發中我們經常需要對代碼進行調試，在dev-tools中組件是以組件name進行顯示的，（如圖一）這樣更有語義化，方便我們快速定位到我們需要審查的位置，結構更清晰明了。

另外vue中name使用和vue-router中name使用沒有直接聯系，是兩個概念。