官方文档指出：name只有作为组件选项时起作用，简单的可以理解为name属性和组件相关，当需要处理组件方面的问题才会用到name属性。
常见的几种用法：
1.递归组件
vue中允许组件模板调用自身，这时候我们就可以使用到name属性，当我们设置了组件的name，组件递归调用自身使用的组件名就是name
//递归子组件 child.vue
<template>
<div class="child">
<!-- 递归组件 -->
<div v-for="(item, index) in treeData" :key="index">
<p>{{ item.title }}</p>
<div class="children" v-if="item.children">
<!-- 嵌套自身 -->
<childTree :treeData="item.children"></childTree>
</div>
</div>
</div>
</template>
<script>
export default {
name: "childTree",
props: ["treeData"],
data() {
return {};
},
mounted() {},
};
</script>
<style lang="stylus" scoped>
.children {
padding-left: 10px;
}
</style>
在父组件中只需要定义数据结构，传给递归子组件
<template>
<div class="father">
<!-- 父组件调用递归组件child.vue -->
<Child :treeData="treeData"></Child>
</div>
</template>
<script>
import Child from "./child.vue";
export default {
name: "",
components: {
//注册组件
Child,
},
data() {
return {
treeData: [
{
title: "递归层1",
children: [
{
title: "递归层1-1",
children: [
{
title: "递归层1-1-1",
},
{
title: "递归层1-1-2",
},
],
},
],
},
{
title: "递归层2",
children: [
{
title: "递归层2-1",
children: [
{
title: "递归层2-1-1",
},
],
}
],
},
],
};
},
};
</script>
image.png
2.配合keep-alive对组件缓存做限制（include/exclude="name"）
keep-alive的 include和exclude 允许有条件的对组件进行缓存,其中include和exclude所匹配的就是组件的name值
<!-- 把除了组件名是 todolist,home 的组件缓存起来 -->
<keep-alive exclude="todolist,home">
<router-view></router-view>
</keep-alive>
3.在dev-tools中使用
在开发中我们经常需要对代码进行调试，在dev-tools中组件是以组件name进行显示的，这样更有语义化，方便我们快速定位到我们需要审查的位置，结构更清晰明了。
