
vue3项目中template标签的#title属性详解
在Vue3项目中,template标签有时会包含一个#title属性,这在使用Element UI的<el-submenu></el-submenu>和<el-menu-item></el-menu-item>组件时尤其常见。
#title属性并非什么特殊字符,它实际上是v-slot:title的简写形式,用于定义组件的具名插槽内容。
例如,构建一个导航菜单,每个菜单项都有标题。在Vue3中,你可以这样写:
<code class="vue"><template v-for="item in items">
<template v-if="item.subs">
<el-submenu :index="item.index" :key="item.index">
<template #title>
<i :class="item.icon"></i>
{{ item.title }}
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.index" :key="item.index">
<template #title>
<i :class="item.icon"></i>
{{ item.title }}
</template>
</el-menu-item>
</template>
</template></code>
#title属性允许你自定义<el-submenu></el-submenu>和<el-menu-item></el-menu-item>组件的标题内容。这个插槽可以包含文本、图标或其他组件,从而实现高度灵活的菜单项显示。
立即学习“前端免费学习笔记(深入)”;
使用#title属性可以方便地创建动态和可复用的菜单组件,无需编写额外的模板代码。










