深层嵌套列表中子组件可通过 provide/inject 获取所属行数据，无需层层透传props或依赖index；vue中在rowitem中provide('rowcontext', rowdata)，子组件inject即可获取，推荐用symbol避免命名冲突。
在使用像 Vue 或 React 这类支持依赖注入（Inject / Provide）的框架时，深层嵌套列表中想让子组件“知道自己属于哪一行”，并不需要层层透传 props 或靠 index 硬绑。关键在于：把当前行数据作为上下文，通过 Provide/Inject 在局部作用域内“注入”进去。
用 provide 把当前行数据注入到子树
在渲染每一行的组件（比如 RowItem）中，直接调用 provide，把本行的完整数据对象作为值注入：
- Vue 示例（Composition API）：
setup(props) {<br> provide('rowContext', props.rowData); // rowData 是这一行的原始对象<br> return () => h('div', {}, slots.default?.());<br>} - 这样，该组件内部任意深度的子组件，只要 inject 同名 key，就能拿到这行数据，无需关心层级或 index。
在任意子组件中 inject 获取当前行上下文
比如一个按钮组件 DeleteButton 放在五层嵌套里，它仍可直接获取所属行的 id 和状态：
const rowContext = inject('rowContext');<br>const handleDelete = () => api.delete(rowContext.id);- 即使列表用了
v-for+key动态更新，每个RowItem的 provide 都是独立作用域，不会串数据。 - 注意：inject 默认返回 undefined，建议加默认值或用
inject('rowContext', null, true)开启非响应式懒注入（Vue 3.3+）以避免不必要的响应性开销。
配合泛型或 Symbol 避免命名冲突
当页面有多个不同类型的列表（如用户列表、订单列表），共用 'rowContext' 可能导致误取。更稳妥的做法：
- 用
Symbol()创建唯一 injection key：export const ROW_CONTEXT = Symbol('rowContext'); - 或者封装成可复用的组合函数：
function useRowContext<t>(data: T) {<br> provide(ROW_CONTEXT, data);<br>}<br>function useInjectedRow<t>() {<br> return inject<t>(ROW_CONTEXT);<br>}</t></t></t>
不推荐但偶尔有效的“伪映射”技巧
有些场景下，你无法修改父组件（如第三方表格库），但又需要在自定义单元格中访问行数据。这时可借助 DOM 层级 + 数据绑定做轻量映射：
- 给每行容器加
data-row-id="123"，子组件用closest('[data-row-id]')找到最近的行容器，再读取属性； - 或利用事件冒泡：子组件触发自定义事件时，附带
this.$el.closest('[data-row-id]')?.dataset.rowId； - 这类方式绕过了响应式系统，适合只读、低频、临时调试用，不宜作为主链路。
