vue中組件name有什么用

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

 export default {
      name:'xxx'
}

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

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

<!-- 父組件 -->
<div class="container">
  <ul>
    <child-tree :list="comRecursive" v-if="comRecursive.length"></child-tree>
  </ul>
</div>

data(){
  return {
    comRecursive :[
      {
        name:'第一層內容1',
        childArr:[
          {
            name:'第二層內容1'
          },
          {
            name:'第二層內容2',
            childArr:[
              {name:'第三層內容1'}
            ]
          }
        ]
      },
      {
        name:'第一層內容2'
      },
      {
        name:'第一層內容3'
      }
    ]
  }
}

<!-- 子組件 -->
<template>
  <div class="container">
    <li v-for="(item,index) in list" :key="index">
      {{item.name}}
      <template v-if="item.childArr">
        <ul>
          <ChildTreeName :list="item.childArr"/>
        </ul>
      </template>
    </li>
  </div>
</template>   
<script>
export default {
  name:'ChildTreeName',
  props:{
    list:{
      type:Array,
      default:[]
    }
  }
}
<script>

結果：

如上圖所以，當我們需要組件嵌套自身的時候，此時在組件內部就是通過name值來調用。值得注意的時候，在做組件遞歸的時候一定要處理好出口，避免造成死循環。

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使用沒有直接聯系，是兩個概念。