Vue组件中name的三大作用

作用一：递归组件

一个组件要用自己的时候，可以通过自己的名字来使用自己。

 <div>
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{ item.title }}
        <!-- 当数据中有children属性时，说明他是一个多级菜单，对组件本身进行循环递归 -->
        <div v-if="item.children" class="item-children">
          <detail-list :list="item.children"></detail-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script> 

作用二：移除keep-alive状态下组件自动缓存功能 -> exclud=“name”。

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

作用三：浏览器使用vue-tools调试时

vue-devtools调试工具里显示的组件名称是由vue中组件name决定的