Vue3 v-slot 指令
Vue3 内置指令v-slot 指令用于表示具名插槽或作用域插槽，用于组件之间的内容分发。
基本说明
v-slot 指令用于为插槽提供内容或接收插槽传递的 props。它是 Vue 中实现组件内容分发的核心方式。
- 简写: #
- 期望类型: JavaScript 表达式（可选，仅在接收 props 时需要）
- 作用: 表示具名插槽或作用域插槽。
基本用法
1、具名插槽
实例
<template>
<base-layout>
<template v-slot:header>
<h1>页面标题</h1>
</template>
<template v-slot:default>
<p>主要内容区域</p>
</template>
<template v-slot:footer>
<p>页脚信息</p>
</template>
</base-layout>
</template>
<base-layout>
<template v-slot:header>
<h1>页面标题</h1>
</template>
<template v-slot:default>
<p>主要内容区域</p>
</template>
<template v-slot:footer>
<p>页脚信息</p>
</template>
</base-layout>
</template>
2、简写形式
实例
<!-- 等价 -->
<template v-slot:header>标题</template>
<template #header>标题</template>
<template v-slot:header>标题</template>
<template #header>标题</template>
3、作用域插槽
作用域插槽允许子组件向父组件传递数据：
实例
<!-- 父组件 -->
<template>
<current-user v-slot="slotProps">
<p>用户名: {{ slotProps.user.name }}</p>
</current-user>
</template>
<script>
export default {
components: { CurrentUser }
}
</script>
<!-- 子组件 CurrentUser.vue -->
<template>
<slot :user="currentUser"></slot>
</template>
<script>
export default {
data() {
return {
currentUser: { name: '张三' }
}
}
}
</script>
<template>
<current-user v-slot="slotProps">
<p>用户名: {{ slotProps.user.name }}</p>
</current-user>
</template>
<script>
export default {
components: { CurrentUser }
}
</script>
<!-- 子组件 CurrentUser.vue -->
<template>
<slot :user="currentUser"></slot>
</template>
<script>
export default {
data() {
return {
currentUser: { name: '张三' }
}
}
}
</script>