vue组件中name的作用

export default{
    name:'xxx'
}

1.配合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>

2.组件递归操作

注：vue允许组件模版调用自身，可以根据组件的name进行操作

//父组件
<div class="container">
    <ul>
        <child-tree :list="comList" v-if="comList"></child-tree>
    </ul>
</div>
data(){
    return{
        comList:[
            {
                name:'第一层内容1',
                childArr:[
                    {
                        name:'地二层内容1'
                    },
                    {
                        name:'第二层内容2'
                    }
                ]
            },
            {
                name:'第一层内容2'
            },
            {
                name:'第一层内容2'
            }
        ]
    }
}
//子组件
<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>
    name:'ChildTreeName',
    props:{
        list:{
            type:Array,
            default:[]
        }
    }
</script>

3.在dev-tools中使用

注：在开发中对代码进行调试，在dev-tools中组件是以组件name进行显示的，这样更有语义化，方便我们快速定位到我们需要审查的位置，结构更清晰明了。

注意：vue中name使用和vue-router中name没有直接联系，是两个概念。