VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心Vue 中常见的slot插槽经过 VuReact 编译后会变成什么样的 React 代码前置约定为避免示例代码冗余导致理解偏差先明确两个小约定文中 Vue / React 代码均为核心逻辑简写省略完整组件包裹、无关配置等内容默认读者已熟悉 Vue 3 中的插槽用法。编译对照默认插槽slot默认插槽是 Vue 中最基本的插槽形式用于接收父组件传递的默认内容。Vue 代码!-- 子组件 Child.vue --templatedivclasscontainerslot/slot/div/template!-- 父组件使用 --Childp这是插槽内容/p/ChildVuReact 编译后 React 代码// 子组件 Child.jsxfunctionChild(props){return(div classNamecontainer{props.children}/div);}// 父组件使用Childp这是插槽内容/p/Child从示例可以看到Vue 的slot元素被编译为 React 的childrenprop。VuReact 采用children 编译策略将插槽出口转换为 React 的标准 children 接收方式完全保持 Vue 的默认插槽语义——接收父组件传递的子内容并渲染。这种编译方式的关键特点在于语义一致性完全模拟 Vue 默认插槽的行为实现内容分发React 原生支持使用 React 标准的 children 机制无需额外适配语法简洁Vue 的slot简化为{children}表达式性能优化直接使用 React 的原生机制无运行时开销具名插槽slot namexxx具名插槽允许组件定义多个插槽出口父组件可以通过名称指定内容插入位置。Vue 代码!-- 子组件 Layout.vue --templatedivclasslayoutheaderslotnameheader/slot/headermainslot/slot/mainfooterslotnamefooter/slot/footer/div/template!-- 父组件使用 --Layouttemplate#headerh1页面标题/h1/templatep主要内容/ptemplate#footerp版权信息/p/template/LayoutVuReact 编译后 React 代码// 子组件 Layout.jsxfunctionLayout(props){return(div classNamelayoutheader{props.header}/headermain{props.children}/mainfooter{props.footer}/footer/div);}// 父组件使用Layout header{h1页面标题/h1}footer{p版权信息/p}p主要内容/p/Layout从示例可以看到Vue 的具名插槽slot namexxx被编译为 React 的 props。VuReact 采用props 编译策略将具名插槽出口转换为组件的命名 props完全保持 Vue 的具名插槽语义——通过不同的 prop 名称区分不同的插槽内容。编译规则插槽名映射slot nameheader→headerprop默认插槽slot→childrenpropprops 接收在组件函数参数中解构接收所有插槽 props作用域插槽slot :propvalue作用域插槽允许子组件向插槽内容传递数据实现更灵活的渲染控制。Vue 代码!-- 子组件 List.vue --templateulliv-for(item, i) in props.items:keyitem.idslot:itemitem:indexi/slot/li/ul/template!-- 父组件使用 --List:itemsuserstemplatev-slotslotPropsdivclassuser-item{{ slotProps.index 1 }}. {{ slotProps.item.name }}/div/template/ListVuReact 编译后 React 代码// 子组件 List.jsxfunctionList(props){return(ul{props.items.map((item,index)(li key{item.id}{props.children?.({item,index})}/li))}/ul);}// 父组件使用List items{users}children{(slotProps)(div classNameuser-item{slotProps.index1}.{slotProps.item.name}/div)}/从示例可以看到Vue 的作用域插槽被编译为 React 的函数 children。VuReact 采用函数 children 编译策略将作用域插槽出口转换为接收参数的函数完全保持 Vue 的作用域插槽语义——子组件通过函数调用向父组件传递数据父组件通过函数参数接收数据并渲染。编译规则插槽属性转换slot :itemitem :indexi→ 函数参数{ item, index }函数调用在渲染位置调用children()函数并传递数据可选链保护使用?.避免未提供插槽内容时的错误具名作用域插槽slot namexxx :propvalue具名作用域插槽结合了具名插槽和作用域插槽的特性。Vue 代码!-- 子组件 Table.vue --templatetabletheadtrslotnameheader:columnsprops.columns/slot/tr/theadtbodytrv-forrow in props.data:keyrow.idslotnamebody:rowrow:columnsprops.columns/slot/tr/tbody/table/template!-- 父组件使用 --Table:columnstableColumns:datatableDatatemplate#headerheaderPropsthv-forcol in headerProps.columns:keycol.id{{ col.title }}/th/templatetemplate#bodybodyPropstdv-forcol in bodyProps.columns:keycol.id{{ bodyProps.row[col.field] }}/td/template/TableVuReact 编译后 React 代码// 子组件 Table.jsxfunctionTable(props){return(tabletheadtr{props.header?.({columns:props.columns})}/tr/theadtbody{props.data.map((row)(tr key{row.id}{props.body?.({row:props.row,columns:props.columns})}/tr))}/tbody/table);}// 父组件使用Table columns{tableColumns}data{tableData}header{(headerProps)({headerProps.columns.map((col)(th key{col.id}{col.title}/th))}/)}body{(bodyProps)({bodyProps.columns.map((col)(td key{col.id}{bodyProps.row[col.field]}/td))}/)}/编译策略具名函数 props具名作用域插槽转换为函数 props参数传递正确传递作用域参数Fragment 包装多个元素使用 Fragment 包装类型安全保持 TypeScript 类型定义的完整性插槽默认内容Vue 支持在插槽定义处提供默认内容当父组件没有提供插槽内容时显示。Vue 代码!-- 子组件 Button.vue --templatebuttonclassbtnslotspanclassdefault-text点击我/span/slot/button/templateVuReact 编译后 React 代码// 子组件 Button.jsxfunctionButton(props){return(button classNamebtn{props.children||span classNamedefault-text点击我/span}/button);}默认内容处理规则条件渲染使用||运算符检查 children 是否存在默认值提供当 children 为 falsy 值时渲染默认内容React 模式使用标准的 React 条件渲染模式动态插槽名Vue 支持动态的插槽名称用于更灵活的插槽选择。Vue 代码!-- 子组件 DynamicSlot.vue --templatedivslot:namedynamicSlotName/slot/div/templateVuReact 编译后 React 代码// 子组件 DynamicSlot.jsxfunctionDynamicSlot(props){return(div{props[dynamicSlotName]}/div);}动态插槽处理计算属性名使用对象计算属性语法接收动态插槽运行时确定插槽名在运行时确定编译策略总结VuReact 的slot编译策略展示了完整的插槽系统转换能力默认插槽转换为 React 的children具名插槽转换为组件的命名 props作用域插槽转换为函数 children 或函数 props默认内容支持插槽默认内容动态插槽支持动态插槽名称插槽类型映射表Vue 插槽类型React 对应形式说明slotchildren默认插槽作为组件的子元素slot namexxxxxxprop具名插槽作为组件的属性slot :propvalue函数children作用域插槽作为接收参数的函数slot namexxx :propvalue函数xxxprop具名作用域插槽作为函数属性性能优化策略静态插槽优化对于静态插槽内容编译为静态 JSX函数缓存对于作用域插槽智能缓存渲染函数按需生成根据实际使用情况生成最简化的代码类型推导支持在TypeScript中智能推导插槽的类型定义VuReact 的编译策略确保了从 Vue 到 React 的平滑迁移开发者无需手动重写插槽逻辑。编译后的代码既保持了 Vue 的语义和灵活性又符合 React 的组件设计模式让迁移后的应用保持完整的内容分发能力。 相关资源VuReact 官方文档语义编译对照总览 继续阅读上一篇动态组件下一篇KeepAlive组件✨ 如果你觉得本文对你理解 VuReact 有帮助欢迎点赞、收藏、关注