No estoy muy seguro de cuándo estaba escribiendo un proyecto vue. Siempre pensé que era inútil nombrar el valor del componente. No lo sentí hasta que entré en contacto con el componente recursivo hoy, y luego fui a Baidu para algo relacionado con el atributo de nombre es muy útil, ahora regístrelo.
Rol uno: componentes recursivos
Cuando un componente necesita usarse a sí mismo, puede usarse a sí mismo por su propio nombre.
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>
lista de datos
list: [
{
title: '成人票',
children: [
{
title: '成人三馆联票',
children:[{
title: '成人三馆联票 - 某一连锁店销售'
}]
},
{
title: '成人五馆联票',
children:[{
title: '成人三馆联票 - 某一连锁店销售'
}]
}
]
},
{
title: '学生票'
},
{
title: '儿童票'
},
{
title: '特惠票'
}
]
}
El efecto es el siguiente: Efecto
2: Elimina la función de almacenamiento en caché automático del componente en el estado de mantener vivo -> exclud = "nombre".
Usamos keep-alive en App.vue para que cuando ingresemos por segunda vez, la página no solicite ajax nuevamente, es decir, la función de gancho montado () solo se ejecutará una vez.
Hay dos soluciones, una es agregar la función activada () y obtener los datos nuevamente cada vez que ingresa a una nueva página.
Otra solución es agregar exclud = "name" en keep-alive para eliminar el caché de la página seleccionada, como se muestra en la siguiente figura:
<div id="app">
<keep-alive exclude="Detail">
<router-view />
</keep-alive>
</div>
Función 3: cuando el navegador usa vue-tools para depurar,
el nombre del componente que se muestra en la herramienta de depuración vue-devtools está determinado por el nombre del componente en vue
