Vue中插槽内容在父组件作用域编译，故无法直接访问子组件props；需用作用域插槽（如<slot :title="title">配合v-slot="{ title }"）显式传递数据。
Props在Slot内部无法直接访问的原因
Vue中插槽（Slot）的内容是在父组件作用域中编译的，而子组件通过props传递的数据属于子组件自身作用域。这意味着：父组件模板里写的插槽内容，**拿不到子组件传进来的props值**——它根本看不到那些数据。
常见错误写法与典型表现
比如子组件接收一个title prop，并希望父组件在<slot>里直接使用它：
<!-- ❌ 子组件模板中这样写无效 -->
<slot>{{ title }}</slot>
立即学习“前端免费学习笔记（深入）”；
此时title在父组件作用域中未定义，渲染结果为空或报错。
正确解法：作用域插槽（Scoped Slot）
要让父组件能访问子组件的props，必须显式“暴露”这些数据，方式是使用v-slot（或旧版slot-scope）绑定作用域属性：
- 子组件中用
<slot :title="title" :loading="loading"></slot>向插槽传入数据 - 父组件中用
<template v-slot="{ title, loading }">{{ title }} ({{ loading ? '加载中' : '' }})</template>解构使用 - 如果插槽有默认内容，可同时保留
<slot>默认文案</slot>，但注意：默认内容仍处于父作用域，不自动获得props
替代方案：避免Slot内依赖props的场景
不是所有情况都非要用作用域插槽。可考虑以下更简洁的做法：
- 把需要动态渲染的内容直接写在子组件模板里，用
v-if/v-for结合props控制，而非丢给插槽 - 用
render函数或setup()+h()手动组合，灵活控制作用域边界 - 拆分组件职责：将“需定制的UI结构”和“需响应props的状态逻辑”分离到不同层级
