插槽内容可直接访问父组件的data、computed、methods及setup中return的变量，因插槽模板编译执行在父组件作用域内；无法访问子组件内部数据，需通过作用域插槽显式传递。
插槽内容天然就能访问父组件的局部变量，不需要额外操作——因为插槽模板写在父组件里，它本就处于父组件的作用域中。
为什么插槽能直接用父组件数据？
Vue 的插槽机制本质是“内容分发”，不是“跨作用域调用”。父组件中写在<template>...</template>子组件>里的所有内容，包括文本、插值、指令、组件，都属于父组件模板的一部分。它的编译和执行完全在父组件上下文中进行。
所以像 {{ count }}、v-if="isLoading"、@click="handleClick" 这些表达式，解析时直接查找父组件的 data、computed、methods，跟写在父组件普通 <div> 里没有任何区别。
<h3>哪些变量插槽可以访问？</h3>
<p>插槽内容可直接使用父组件中以下声明的变量：</p>
<ul>
<li>data 中定义的响应式属性（如 <code>message、list）
filteredItems、isReady）submitForm()、formatDate()）return 暴露的响应式变量或函数（Vue 3 Composition API）插槽不能访问什么？
插槽内容无法访问子组件内部的数据，这是关键边界：
- 子组件的 data、computed、methods 不会自动暴露给插槽
- 子组件的 ref、reactive 状态在插槽中不可见
- 除非显式通过作用域插槽传出，否则插槽拿不到
item、index、loading这类子组件私有状态
这不是限制，而是设计原则：词法作用域规则与 JavaScript 一致——变量在哪定义，就在哪生效。
常见误区与验证方式
有人误以为“插槽被子组件包裹，就应该能读子组件数据”，其实不然。可快速验证：
- 在父组件插槽中写
{{ undefinedVar }}→ 报错：ReferenceError（说明作用域确实是父的） - 在父组件插槽中写
{{ childInternalData }}→ 报错：undefined（说明子组件数据未注入） - 在父组件插槽中写
{{ parentMessage }}→ 正常渲染（确认父作用域可用）
若需子组件数据，必须走作用域插槽流程：子组件 <slot :item="item" :index="i"></slot>，父组件用 v-slot="{ item, index }" 接收。
