作用域插槽是vue 3中子组件向父组件反向传递数据的核心机制，通过slot的v-bind绑定数据、父组件v-slot解构接收，实现响应式数据共享与渲染控制。
作用域插槽是 Vue 3 中子组件向父组件“反向传递数据”的关键机制，它不是靠事件或方法调用，而是通过渲染函数的参数注入，让父组件在使用插槽时能访问子组件内部的数据。
核心逻辑很直接：子组件在 <slot></slot> 标签上用 v-bind 把数据作为属性绑定出去；父组件用 v-slot:xxx="slotProps" 接收这些数据，然后自由渲染。
子组件中定义并暴露数据
子组件需主动把想传给父组件的数据，通过 <slot></slot> 的 v-bind 暴露：
<!-- Child.vue -->
<template><div class="child">
<h3>子组件内容</h3>
<!-- 将内部数据通过 v-bind 绑定到默认插槽 -->
<slot :user-name="userInfo.name" :user-age="userInfo.age" :is-active="isActive"></slot><!-- 也可以为具名插槽做同样操作 --><slot name="footer" :count="itemCount"></slot>
</div>
</template><script setup>
import { reactive, ref } from 'vue'
const userInfo = reactive({
name: '李四',
age: 28
})
const isActive = ref(true)
const itemCount = ref(5)
</script>
⚠️ 注意：
-
v-bind绑定的每个属性（如:user-name）都会成为父组件插槽作用域对象的一个字段； - 不需要
defineEmits，也不触发事件，纯属“数据快照式”传递； - 数据响应性保留——如果
userInfo.name后续变化，父组件中slotProps['user-name']也会自动更新。
父组件中接收并使用作用域数据
父组件用 v-slot（或简写 #）解构插槽参数，即可读取子组件传来的值：
<!-- Parent.vue -->
<template><div class="parent">
<h2>父组件</h2>
<child><!-- 默认插槽：解构出子组件传的属性 --><template username userage isactive><p>姓名：{{ userName }}，年龄：{{ userAge }}</p>
<p>状态：{{ isActive ? '激活' : '未激活' }}</p>
</template><!-- 具名插槽 footer --><template count><small>共 {{ count }} 条记录</small>
</template></child>
</div>
</template><script setup>
import Child from './Child.vue'
</script>
✅ 效果：
父组件完全控制渲染结构，却能基于子组件的实时状态生成内容。比如表格子组件传出 row, index, isSelected，父组件就能决定某一行是否加背景色、是否显示操作按钮。
进阶技巧：结合 v-for 或动态属性更灵活
若子组件要传一组数据（如列表项），可直接绑定整个数组或对象：
<!-- 子组件中 --> <slot :items="itemList" :loading="isLoading"></slot>
<!-- 父组件中 -->
<template items loading><ul v-if="!loading">
<li v-for="(item, i) in items" :key="i">
{{ item.title }} —— {{ item.id }}
</li>
</ul>
<p v-else>加载中...</p>
</template>
这样既保持了父子职责分离，又避免了频繁 emit 或 ref 调用，语义清晰、性能友好。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
