Vue基础教程（125）组件和组合API之作用域插槽：Vue组件通信的“终极武器”？作用域插槽+组合式API，让你的组件骚起来！

朋友们！今天咱们来唠点Vue里那些听起来高大上、但实际用起来能让你直呼“真香”的玩意儿——作用域插槽，特别是当它和组合式API勾搭在一起之后。

这可不是你印象中那个干巴巴的教程，咱争取用说人话的方式，把它掰开了、揉碎了，让你看完不仅能懂，还能立刻用起来，感觉自己又行了！

---

一、 前情提要：我们为啥需要“作用域插槽”？

想象一下这个场景：你是一个优秀的厨师（子组件），你做了一盘绝世好菜（数据）。你的顾客（父组件）坐在餐桌前。

• 普通插槽： 你直接把菜端上去，用什么盘子、怎么摆盘，顾客说了算。但菜是什么，你做主。

<!-- 厨师（子组件） -->
<template>
  <div>
    <slot><!-- 这里是留给顾客的摆盘区域 --></slot>
  </div>
</template>
<!-- 顾客（父组件） -->
<Chef>
  <p>我用这个金盘子来装！</p> <!-- 父组件定义插槽内容 -->
</Chef>

• 作用域插槽： 厉害了！你不仅把菜做出来了，还把食材清单、秘制酱料（数据和方法） 都交给了顾客。顾客可以选择用盘子装、用碗盛，甚至可以当场给你炒成另一道菜！（在父组件里使用子组件的数据来定义显示方式）。

这不就灵活炸了吗？作用域插槽的核心思想就是：“数据在我（子组件）这，但怎么展示，你（父组件）随便玩！”

二、 组合式API：让“数据包”打包得更优雅

在Vue 2的选项式API时代，我们得把这些“食材”（数据）和方法，分别放在data和methods里，然后在插槽上一个个绑定，有点散装。

而组合式API，让我们能像打包“懒人火锅料包”一样，把所有相关的数据、计算属性、方法，用一个响应式的ref或reactive包在一起，逻辑清晰，复用性极高。

当作用域插槽遇上组合式API，就像是给这个“料包”贴上了清晰的标签，让父组件用起来更方便、更强大。

三、 实战开始：打造一个“超级灵活”的用户卡片组件

光说不练假把式，我们来搞一个经典的例子。我们要做一个UserCard组件，它负责获取用户数据，但完全不管这