Vue组件中name的三大作用

一直不太清楚写vue项目的时候遇到给组件命名name值是干嘛用的，一直以为没啥用，直到今天接触到了递归组件，然后又去百度了与name属性相关的些东西才感觉它的用处挺多的是干嘛用的，现在记录下。

作用一：递归组件

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

list.vue

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

list数据是父组件-list定义的数据

list: [
        {
          title: '成人票',
          children: [
            {
              title: '成人三馆联票',
              children:[{
                 title: '成人三馆联票 - 某一连锁店销售'
              }]
            },
            {
              title: '成人五馆联票',
              children:[{
                 title: '成人三馆联票 - 某一连锁店销售'
              }]
            }
          ]
        },
        {
          title: '学生票'
        },
        {
          title: '儿童票'
        },
        {
          title: '特惠票'
        }
      ]
    }

效果如下：

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

我们在App.vue中使用了keep-alive导致我们第二次进入的时候页面不会重新请求ajax，即() 钩子函数只会执行一次。

有两个解决方案,一个增加()函数,每次进入新页面的时候再获取一次数据。

还有个方案就是在keep-alive中增加 =“name”，移除选中页面的缓存是干嘛用的，如下图所示：

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

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

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