vue学习之vue组件中name的作用

vue组件中name的作用

export default {
   name:'xxx'
}

• 作用一：当项目使用keep-alive时，可搭配组件name进行缓存过滤

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

• 作用二：做递归组件
  代码如下：

//Detail.vue组件
<template>
  <div>
    <detail-list :list="list"></detail-list>
  </div>
</template>

<script>
import DetailList from './DetailList'
export default {
  name: 'detail',
  components:{
    DetailList
  },
  data () {
    return {
      list: [{
        title:'A',
        children:[{
          title:'A-A',
          children:[{
            title:'A-A-A'
          }]
        },{
          title:'A-B'
        }]
      },{
        title:'B'
      },{
        title:'C'
      }]
    }
  }
}
</script>

---

注意：vue组件采用驼峰命名法

//DetailList.vue组件
<template>
  <div>
    <div v-for="(item,index) in list" :key="index">
      <div>
        <span>{{item.title}}</span>
      </div>
      <div v-if="item.children">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detailList',
  props:{
    'list':Array
  },
  data () {
    return {
    }
  }
}
</script>

效果如图：

• 作用三：vue-tools的使用
  vue-devtools调试工具里显示的组件名称是由vue中组件name决定的，如图