Vue3 v-slot 详解与示例
Vue3 v-slot 详解与示例
v-slot 是 Vue3 中用于处理插槽（Slots）的指令，它提供了更强大和灵活的插槽功能。下面通过详细的示例来展示各种用法。
🎯 基础概念
什么是插槽？
插槽是 Vue 组件的一个强大特性，它允许你在组件中预留位置，让父组件可以插入自定义内容。
📝 基本用法
1. 默认插槽
子组件 BaseLayout.vue
vue
<template><div class="container"><header><slot></slot> <!-- 默认插槽 --></header><main><p>这是主内容区域</p></main><footer><p>这是页脚</p></footer></div> </template>
父组件使用
vue
<template><BaseLayout><!-- 插入到默认插槽的内容 --><h1>这是页面标题</h1><p>这是插入到header插槽的内容</p></BaseLayout> </template><script setup> import BaseLayout from './BaseLayout.vue' </script>
2. 具名插槽
子组件 Card.vue
vue
<template><div class="card"><div class="card-header"><slot name="header"></slot> <!-- 具名插槽 --></div><div class="card-body"><slot name="body"></slot> <!-- 具名插槽 --></div><div class="card-footer"><slot name="footer"></slot> <!-- 具名插槽 --></div><!-- 默认插槽 --><slot></slot></div>
</template><style scoped>
.card {border: 1px solid #ddd;border-radius: 8px;padding: 16px;margin: 10px;
}
.card-header {font-weight: bold;margin-bottom: 10px;
}
.card-body {margin-bottom: 10px;
}
.card-footer {font-size: 0.8em;color: #666;
}
</style>父组件使用具名插槽
vue
<template><Card><!-- 使用 v-slot 指令 --><template v-slot:header><h2>卡片标题</h2></template><template v-slot:body><p>这是卡片的主要内容区域</p><p>可以包含任何HTML内容</p></template><template v-slot:footer><span>卡片底部信息</span><button @click="handleClick">操作按钮</button></template></Card>
</template><script setup>
import Card from './Card.vue'const handleClick = () => {console.log('按钮被点击了')
}
</script>🔥 v-slot 语法糖
Vue3 提供了 # 符号作为 v-slot: 的简写形式：
vue
<template><Card><!-- 简写语法 --><template #header><h2>简写语法示例</h2></template><template #body><p>使用 # 代替 v-slot:</p></template><template #footer><span>底部内容</span></template></Card> </template>
💡 作用域插槽
作用域插槽允许子组件向插槽传递数据，父组件可以访问这些数据。
1. 基础作用域插槽
子组件 DataList.vue
vue
<template><div class="data-list"><ul><li v-for="item in items" :key="item.id"><!-- 向插槽传递数据 --><slot :item="item" :index="index"></slot></li></ul></div>
</template><script setup>
defineProps({items: {type: Array,default: () => []}
})
</script>父组件使用作用域插槽
vue
<template><DataList :items="userList"><!-- 接收子组件传递的数据 --><template v-slot:default="slotProps"><div class="user-item"><span>{{ slotProps.index + 1 }}. </span><strong>{{ slotProps.item.name }}</strong><em>({{ slotProps.item.age }} 岁)</em></div></template></DataList>
</template><script setup>
import { ref } from 'vue'
import DataList from './DataList.vue'const userList = ref([{ id: 1, name: '张三', age: 25 },{ id: 2, name: '李四', age: 30 },{ id: 3, name: '王五', age: 28 }
])
</script><style scoped>
.user-item {padding: 8px;margin: 4px 0;background-color: #f5f5f5;border-radius: 4px;
}
</style>2. 解构作用域插槽参数
vue
<template><DataList :items="userList"><!-- 使用解构语法 --><template #default="{ item, index }"><div class="user-item" :class="{ active: index % 2 === 0 }"><span>{{ index + 1 }}. </span><strong>{{ item.name }}</strong><span class="age">{{ item.age }} 岁</span></div></template></DataList>
</template>🎭 具名作用域插槽
子组件 UserCard.vue
vue
<template><div class="user-card"><!-- 具名作用域插槽 --><slot name="avatar" :user="user" :size="avatarSize"></slot><div class="user-info"><slot name="name" :user="user"></slot><slot name="details" :user="user"></slot></div><div class="actions"><slot name="actions" :user="user" :onEdit="handleEdit"></slot></div></div>
</template><script setup>
import { ref } from 'vue'const props = defineProps({user: {type: Object,required: true}
})const avatarSize = ref('medium')const handleEdit = () => {console.log('编辑用户:', props.user.name)
}
</script><style scoped>
.user-card {border: 1px solid #e0e0e0;border-radius: 8px;padding: 16px;margin: 10px;display: flex;align-items: center;gap: 16px;
}
.user-info {flex: 1;
}
.actions {display: flex;gap: 8px;
}
</style>父组件使用具名作用域插槽
vue
<template><UserCard :user="currentUser"><!-- 具名作用域插槽 --><template #avatar="{ user, size }"><div class="avatar" :class="size"><img :src="user.avatar" :alt="user.name" /></div></template><template #name="{ user }"><h3>{{ user.name }}</h3></template><template #details="{ user }"><p>邮箱: {{ user.email }}</p><p>角色: {{ user.role }}</p></template><template #actions="{ user, onEdit }"><button @click="onEdit">编辑</button><button @click="deleteUser(user.id)">删除</button></template></UserCard>
</template><script setup>
import { ref } from 'vue'
import UserCard from './UserCard.vue'const currentUser = ref({id: 1,name: '张三',email: 'zhangsan@example.com',role: '管理员',avatar: '/avatars/zhangsan.jpg'
})const deleteUser = (userId) => {console.log('删除用户:', userId)
}
</script><style scoped>
.avatar {width: 50px;height: 50px;border-radius: 50%;overflow: hidden;
}
.avatar.medium {width: 50px;height: 50px;
}
.avatar img {width: 100%;height: 100%;object-fit: cover;
}
</style>🔄 动态插槽名
vue
<template><DynamicComponent><!-- 动态插槽名 --><template v-slot:[dynamicSlotName]><p>这是动态插槽的内容</p></template><!-- 使用计算属性 --><template #[computedSlotName]><p>这是计算属性决定的插槽内容</p></template></DynamicComponent>
</template><script setup>
import { ref, computed } from 'vue'const dynamicSlotName = ref('header')
const slotType = ref('primary')const computedSlotName = computed(() => {return `${slotType.value}-content`
})
</script>📊 高级示例：数据表格组件
子组件 DataTable.vue
vue
<template><div class="data-table"><table><thead><tr><!-- 动态表头 --><th v-for="column in columns" :key="column.key"><slot name="header" :column="column">{{ column.title }}</slot></th></tr></thead><tbody><!-- 动态数据行 --><tr v-for="(row, index) in data" :key="row.id"><td v-for="column in columns" :key="column.key"><slot name="cell" :value="row[column.key]" :row="row" :column="column":index="index">{{ row[column.key] }}</slot></td></tr></tbody></table><!-- 空状态插槽 --><div v-if="data.length === 0" class="empty-state"><slot name="empty"><p>暂无数据</p></slot></div></div>
</template><script setup>
defineProps({columns: {type: Array,default: () => []},data: {type: Array,default: () => []}
})
</script><style scoped>
.data-table {width: 100%;
}
table {width: 100%;border-collapse: collapse;
}
th, td {border: 1px solid #ddd;padding: 8px;text-align: left;
}
th {background-color: #f5f5f5;
}
.empty-state {text-align: center;padding: 40px;color: #666;
}
</style>父组件使用数据表格
vue
<template><DataTable :columns="columns" :data="users"><!-- 自定义表头 --><template #header="{ column }"><span class="header-cell">{{ column.title }}<span v-if="column.sortable" class="sort-icon">↕️</span></span></template><!-- 自定义单元格内容 --><template #cell="{ value, row, column }"><template v-if="column.key === 'avatar'"><img :src="value" :alt="row.name" class="avatar" /></template><template v-else-if="column.key === 'status'"><span :class="['status', value]">{{ getStatusText(value) }}</span></template><template v-else-if="column.key === 'actions'"><button @click="editUser(row)">编辑</button><button @click="deleteUser(row.id)">删除</button></template><template v-else>{{ value }}</template></template><!-- 自定义空状态 --><template #empty><div class="custom-empty"><p>📊 没有找到任何用户数据</p><button @click="loadUsers">重新加载</button></div></template></DataTable>
</template><script setup>
import { ref } from 'vue'
import DataTable from './DataTable.vue'const columns = ref([{ key: 'id', title: 'ID', sortable: true },{ key: 'name', title: '姓名', sortable: true },{ key: 'avatar', title: '头像' },{ key: 'email', title: '邮箱' },{ key: 'status', title: '状态' },{ key: 'actions', title: '操作' }
])const users = ref([{id: 1,name: '张三',avatar: '/avatars/1.jpg',email: 'zhangsan@example.com',status: 'active'},{id: 2,name: '李四',avatar: '/avatars/2.jpg',email: 'lisi@example.com',status: 'inactive'}
])const getStatusText = (status) => {const statusMap = {active: '活跃',inactive: '非活跃'}return statusMap[status] || status
}const editUser = (user) => {console.log('编辑用户:', user)
}const deleteUser = (userId) => {console.log('删除用户:', userId)
}const loadUsers = () => {console.log('重新加载用户数据')
}
</script><style scoped>
.header-cell {display: flex;align-items: center;gap: 4px;
}
.sort-icon {font-size: 12px;
}
.avatar {width: 30px;height: 30px;border-radius: 50%;
}
.status {padding: 2px 8px;border-radius: 4px;font-size: 12px;
}
.status.active {background-color: #e8f5e8;color: #2e7d32;
}
.status.inactive {background-color: #ffebee;color: #c62828;
}
.custom-empty {text-align: center;padding: 40px;
}
</style>💡 最佳实践与技巧
1. 提供合理的默认内容
vue
<!-- 子组件 --> <template><div class="notification"><slot name="icon"><!-- 默认图标 --><span class="default-icon">💡</span></slot><div class="content"><slot name="title"><h3>默认标题</h3></slot><slot name="message"><p>默认消息内容</p></slot></div></div> </template>
2. 使用条件插槽
vue
<template><Modal :show="showModal"><!-- 条件性渲染插槽内容 --><template #header v-if="hasCustomHeader"><CustomHeader :title="modalTitle" /></template><template #body><div v-if="isLoading"><slot name="loading"><p>加载中...</p></slot></div><div v-else><slot name="content"></slot></div></template></Modal> </template>
3. 插槽性能优化
vue
<template><VirtualList :items="largeDataSet"><!-- 使用 v-memo 优化大量插槽内容 --><template #item="{ item, index }"><div v-memo="[item.id]"><slot name="item-content" :item="item" :index="index">{{ item.name }}</slot></div></template></VirtualList>
</template>🎯 总结
Vue3 的 v-slot 提供了强大的插槽功能：
| 特性 | 语法 | 用途 |
|---|---|---|
| 默认插槽 | <slot> | 基本内容插入 |
| 具名插槽 | v-slot:name 或 #name | 多个插槽区分 |
| 作用域插槽 | v-slot="props" | 子向父传递数据 |
| 动态插槽 | v-slot:[dynamicName] | 动态决定插槽名 |
| 解构语法 | #default="{ prop }" | 简化数据访问 |
关键优势：
更好的类型推断（配合 TypeScript）
更清晰的语法（特别是简写形式）
更强的灵活性（动态插槽、作用域插槽）
更好的性能（优化的渲染机制）
掌握这些插槽技术可以让你创建出高度可复用和灵活的组件，大大提升开发效率。