I’m not sure when I’m writing a vue project and I’ve always thought that it’s useless to name the component name value. I didn’t feel it until I came into contact with recursive components today and then went to Baidu for something related to the name attribute. Is very useful, now record it.
Role one: recursive components
When a component needs to use itself, it can use itself by its own 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 }}
<!-- 当数据中有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>
list data
list: [
{
title: '成人票',
children: [
{
title: '成人三馆联票',
children:[{
title: '成人三馆联票 - 某一连锁店销售'
}]
},
{
title: '成人五馆联票',
children:[{
title: '成人三馆联票 - 某一连锁店销售'
}]
}
]
},
{
title: '学生票'
},
{
title: '儿童票'
},
{
title: '特惠票'
}
]
}
The effect is as follows: Effect
2: Remove the automatic caching function of the component in the keep-alive state -> exclud="name".
We use keep-alive in App.vue, so when we enter the second time, the page will not request ajax again, that is, the mounted() hook function will only be executed once.
There are two solutions, one is to add the activated() function, and get the data again every time you enter a new page.
Another solution is to add exclud="name" in keep-alive to remove the cache of the selected page, as shown in the following figure:
<div id="app">
<keep-alive exclude="Detail">
<router-view />
</keep-alive>
</div>
Function 3: When the browser uses vue-tools to debug,
the component name displayed in the vue-devtools debugging tool is determined by the component name in vue
