[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"3786388":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":12,"collection_id":13,"published_timestamp":14,"language":15,"subforem_id":16,"positive_reactions_count":12,"cover_image":17,"social_image":18,"canonical_url":19,"created_at":14,"edited_at":13,"crossposted_at":13,"published_at":14,"last_comment_at":14,"reading_time_minutes":20,"tag_list":21,"tags":22,"body_html":27,"body_markdown":28,"user":29},"article",3786388,"Vue slot to React: How does VuReact handle it?","VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3...","May 31","vue-slot-to-react-how-does-vureact-handle-it-1935","/smirk9581/vue-slot-to-react-how-does-vureact-handle-it-1935","https://dev.to/smirk9581/vue-slot-to-react-how-does-vureact-handle-it-1935",0,null,"2026-05-31T00:52:39Z","en",1,"https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fssn15sj6ruolfz4xvmdg.png","https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fssn15sj6ruolfz4xvmdg.png","https://vureact.top/en/guide/semantic-comparison/template/slot.html",5,"webdev, javascript, vue, react",[23,24,25,26],"webdev","javascript","vue","react","\u003Cp>\u003Ca href=\"https://vureact.top/en/guide/introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\">VuReact\u003C/a> is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's common \u003Ccode><slot>\u003C/code> mechanism is compiled into React code by VuReact.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"before-we-start\" href=\"#before-we-start\">\n  \u003C/a>\n  Before We Start\n\u003C/h2>\n\n\u003Cp>To keep the examples easy to read, this article follows two simple conventions:\u003C/p>\n\n\u003Col>\n\u003Cli>All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\u003C/li>\n\u003Cli>The discussion assumes you are already familiar with Vue 3's slot usage.\u003C/li>\n\u003C/ol>\n\n\u003Ch2>\n  \u003Ca name=\"compilation-mapping\" href=\"#compilation-mapping\">\n  \u003C/a>\n  Compilation Mapping\n\u003C/h2>\n\n\u003Ch3>\n  \u003Ca name=\"default-slot-raw-ltslotgt-endraw-\" href=\"#default-slot-raw-ltslotgt-endraw-\">\n  \u003C/a>\n  Default slot: \u003Ccode><slot>\u003C/code>\n\u003C/h3>\n\n\u003Cp>The default slot is Vue's most basic slot form, used to receive default content passed from the parent component.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"c\"><!-- Child component Child.vue -->\u003C/span>\n\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">class=\u003C/span>\u003Cspan class=\"s\">\"container\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><slot></slot>\u003C/span>\n  \u003Cspan class=\"nt\"></div>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\n\u003Cspan class=\"c\"><!-- Parent usage -->\u003C/span>\n\u003Cspan class=\"nt\"><Child>\u003C/span>\n  \u003Cspan class=\"nt\"><p>\u003C/span>This is slot content\u003Cspan class=\"nt\"></p>\u003C/span>\n\u003Cspan class=\"nt\"></Child>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"c1\">// Child component Child.jsx\u003C/span>\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">Child\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"k\">return \u003C/span>\u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span> \u003Cspan class=\"na\">className\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"container\"\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">children\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n    \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">div\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\n\u003Cspan class=\"c1\">// Parent usage\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Child\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>This is slot content\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nc\">Child\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, Vue's \u003Ccode><slot>\u003C/code> element is compiled into React's \u003Ccode>children\u003C/code> prop. VuReact adopts a \u003Cstrong>children compilation strategy\u003C/strong>, converting the slot outlet into React's standard children receiving mechanism. This \u003Cstrong>fully preserves Vue's default slot semantics\u003C/strong> — receiving child content passed from the parent component and rendering it.\u003C/p>\n\n\u003Cp>The key characteristics of this compilation approach are:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Semantic consistency\u003C/strong>: Fully simulates Vue's default slot behavior by implementing content distribution\u003C/li>\n\u003Cli>\n\u003Cstrong>React-native support\u003C/strong>: Uses React's standard children mechanism with no additional adaptation needed\u003C/li>\n\u003Cli>\n\u003Cstrong>Clean syntax\u003C/strong>: Vue's \u003Ccode><slot>\u003C/code> is simplified to a \u003Ccode>{children}\u003C/code> expression\u003C/li>\n\u003Cli>\n\u003Cstrong>Performance optimization\u003C/strong>: Uses React's native mechanism directly with zero runtime overhead\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"named-slots-raw-ltslot-namexxxgt-endraw-\" href=\"#named-slots-raw-ltslot-namexxxgt-endraw-\">\n  \u003C/a>\n  Named slots: \u003Ccode><slot name=\"xxx\">\u003C/code>\n\u003C/h3>\n\n\u003Cp>Named slots allow a component to define multiple slot outlets, and the parent component can specify where content should be inserted by name.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"c\"><!-- Child component Layout.vue -->\u003C/span>\n\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">class=\u003C/span>\u003Cspan class=\"s\">\"layout\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><header>\u003C/span>\n      \u003Cspan class=\"nt\"><slot\u003C/span> \u003Cspan class=\"na\">name=\u003C/span>\u003Cspan class=\"s\">\"header\"\u003C/span>\u003Cspan class=\"nt\">></slot>\u003C/span>\n    \u003Cspan class=\"nt\"></header>\u003C/span>\n    \u003Cspan class=\"nt\"><main>\u003C/span>\n      \u003Cspan class=\"nt\"><slot></slot>\u003C/span>\n    \u003Cspan class=\"nt\"></main>\u003C/span>\n    \u003Cspan class=\"nt\"><footer>\u003C/span>\n      \u003Cspan class=\"nt\"><slot\u003C/span> \u003Cspan class=\"na\">name=\u003C/span>\u003Cspan class=\"s\">\"footer\"\u003C/span>\u003Cspan class=\"nt\">></slot>\u003C/span>\n    \u003Cspan class=\"nt\"></footer>\u003C/span>\n  \u003Cspan class=\"nt\"></div>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\n\u003Cspan class=\"c\"><!-- Parent usage -->\u003C/span>\n\u003Cspan class=\"nt\"><Layout>\u003C/span>\n  \u003Cspan class=\"nt\"><template\u003C/span> \u003Cspan class=\"na\">#header\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><h1>\u003C/span>Page Title\u003Cspan class=\"nt\"></h1>\u003C/span>\n  \u003Cspan class=\"nt\"></template>\u003C/span>\n\n  \u003Cspan class=\"nt\"><p>\u003C/span>Main content\u003Cspan class=\"nt\"></p>\u003C/span>\n\n  \u003Cspan class=\"nt\"><template\u003C/span> \u003Cspan class=\"na\">#footer\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><p>\u003C/span>Copyright information\u003Cspan class=\"nt\"></p>\u003C/span>\n  \u003Cspan class=\"nt\"></template>\u003C/span>\n\u003Cspan class=\"nt\"></Layout>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"c1\">// Child component Layout.jsx\u003C/span>\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">Layout\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"k\">return \u003C/span>\u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span> \u003Cspan class=\"na\">className\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"layout\"\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">header\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">header\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">header\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">main\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">children\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">main\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">footer\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">footer\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">footer\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n    \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">div\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\n\u003Cspan class=\"c1\">// Parent usage\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Layout\u003C/span>\n  \u003Cspan class=\"na\">header\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">h1\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Page Title\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">h1\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">footer\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Copyright information\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Main content\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nc\">Layout\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, Vue's named slots \u003Ccode><slot name=\"xxx\">\u003C/code> are compiled into React props. VuReact adopts a \u003Cstrong>props compilation strategy\u003C/strong>, converting named slot outlets into component props. This \u003Cstrong>fully preserves Vue's named slot semantics\u003C/strong> — distinguishing different slot content through different prop names.\u003C/p>\n\n\u003Cp>\u003Cstrong>Compilation rules\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Slot name mapping\u003C/strong>: \u003Ccode><slot name=\"header\">\u003C/code> → \u003Ccode>header\u003C/code> prop\u003C/li>\n\u003Cli>\n\u003Cstrong>Default slot\u003C/strong>: \u003Ccode><slot>\u003C/code> → \u003Ccode>children\u003C/code> prop\u003C/li>\n\u003Cli>\n\u003Cstrong>Props receiving\u003C/strong>: Destructure all slot props in the component function parameters\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"scoped-slots-raw-ltslot-propvaluegt-endraw-\" href=\"#scoped-slots-raw-ltslot-propvaluegt-endraw-\">\n  \u003C/a>\n  Scoped slots: \u003Ccode><slot :prop=\"value\">\u003C/code>\n\u003C/h3>\n\n\u003Cp>Scoped slots allow child components to pass data to slot content, enabling more flexible render control.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"c\"><!-- Child component List.vue -->\u003C/span>\n\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><ul>\u003C/span>\n    \u003Cspan class=\"nt\"><li\u003C/span> \u003Cspan class=\"na\">v-for=\u003C/span>\u003Cspan class=\"s\">\"(item, i) in props.items\"\u003C/span> \u003Cspan class=\"na\">:key=\u003C/span>\u003Cspan class=\"s\">\"item.id\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n      \u003Cspan class=\"nt\"><slot\u003C/span> \u003Cspan class=\"na\">:item=\u003C/span>\u003Cspan class=\"s\">\"item\"\u003C/span> \u003Cspan class=\"na\">:index=\u003C/span>\u003Cspan class=\"s\">\"i\"\u003C/span>\u003Cspan class=\"nt\">></slot>\u003C/span>\n    \u003Cspan class=\"nt\"></li>\u003C/span>\n  \u003Cspan class=\"nt\"></ul>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\n\u003Cspan class=\"c\"><!-- Parent usage -->\u003C/span>\n\u003Cspan class=\"nt\"><List\u003C/span> \u003Cspan class=\"na\">:items=\u003C/span>\u003Cspan class=\"s\">\"users\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n  \u003Cspan class=\"nt\"><template\u003C/span> \u003Cspan class=\"na\">v-slot=\u003C/span>\u003Cspan class=\"s\">\"slotProps\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">class=\u003C/span>\u003Cspan class=\"s\">\"user-item\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n      {{ slotProps.index + 1 }}. {{ slotProps.item.name }}\n    \u003Cspan class=\"nt\"></div>\u003C/span>\n  \u003Cspan class=\"nt\"></template>\u003C/span>\n\u003Cspan class=\"nt\"></List>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"c1\">// Child component List.jsx\u003C/span>\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">List\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"k\">return \u003C/span>\u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">ul\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">items\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">map\u003C/span>\u003Cspan class=\"p\">((\u003C/span>\u003Cspan class=\"nx\">item\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">index\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">(\u003C/span>\n        \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">li\u003C/span> \u003Cspan class=\"na\">key\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">item\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">id\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n          \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">children\u003C/span>\u003Cspan class=\"p\">?.({\u003C/span> \u003Cspan class=\"nx\">item\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">index\u003C/span> \u003Cspan class=\"p\">})\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n        \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">li\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\">))\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n    \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">ul\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\n\u003Cspan class=\"c1\">// Parent usage\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">List\u003C/span> \n  \u003Cspan class=\"na\">items\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">users\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">children\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">slotProps\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span> \u003Cspan class=\"na\">className\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"user-item\"\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">slotProps\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">index\u003C/span> \u003Cspan class=\"o\">+\u003C/span> \u003Cspan class=\"mi\">1\u003C/span>\u003Cspan class=\"si\">}\u003C/span>. \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">slotProps\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">item\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">name\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n    \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">div\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\">)\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, Vue's scoped slots are compiled into React function children. VuReact adopts a \u003Cstrong>function children compilation strategy\u003C/strong>, converting scoped slot outlets into functions that receive parameters. This \u003Cstrong>fully preserves Vue's scoped slot semantics\u003C/strong> — the child component passes data to the parent through function calls, and the parent receives data and renders via function parameters.\u003C/p>\n\n\u003Cp>\u003Cstrong>Compilation rules\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Slot attribute conversion\u003C/strong>: \u003Ccode><slot :item=\"item\" :index=\"i\">\u003C/code> → function parameter \u003Ccode>{ item, index }\u003C/code>\n\u003C/li>\n\u003Cli>\n\u003Cstrong>Function invocation\u003C/strong>: Calls the \u003Ccode>children()\u003C/code> function at the render location and passes data\u003C/li>\n\u003Cli>\n\u003Cstrong>Optional chaining guard\u003C/strong>: Uses \u003Ccode>?.\u003C/code> to prevent errors when no slot content is provided\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"named-scoped-slots-raw-ltslot-namexxx-propvaluegt-endraw-\" href=\"#named-scoped-slots-raw-ltslot-namexxx-propvaluegt-endraw-\">\n  \u003C/a>\n  Named scoped slots: \u003Ccode><slot name=\"xxx\" :prop=\"value\">\u003C/code>\n\u003C/h3>\n\n\u003Cp>Named scoped slots combine the features of both named slots and scoped slots.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"c\"><!-- Child component Table.vue -->\u003C/span>\n\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><table>\u003C/span>\n    \u003Cspan class=\"nt\"><thead>\u003C/span>\n      \u003Cspan class=\"nt\"><tr>\u003C/span>\n        \u003Cspan class=\"nt\"><slot\u003C/span> \u003Cspan class=\"na\">name=\u003C/span>\u003Cspan class=\"s\">\"header\"\u003C/span> \u003Cspan class=\"na\">:columns=\u003C/span>\u003Cspan class=\"s\">\"props.columns\"\u003C/span>\u003Cspan class=\"nt\">></slot>\u003C/span>\n      \u003Cspan class=\"nt\"></tr>\u003C/span>\n    \u003Cspan class=\"nt\"></thead>\u003C/span>\n    \u003Cspan class=\"nt\"><tbody>\u003C/span>\n      \u003Cspan class=\"nt\"><tr\u003C/span> \u003Cspan class=\"na\">v-for=\u003C/span>\u003Cspan class=\"s\">\"row in props.data\"\u003C/span> \u003Cspan class=\"na\">:key=\u003C/span>\u003Cspan class=\"s\">\"row.id\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n        \u003Cspan class=\"nt\"><slot\u003C/span> \u003Cspan class=\"na\">name=\u003C/span>\u003Cspan class=\"s\">\"body\"\u003C/span> \u003Cspan class=\"na\">:row=\u003C/span>\u003Cspan class=\"s\">\"row\"\u003C/span> \u003Cspan class=\"na\">:columns=\u003C/span>\u003Cspan class=\"s\">\"props.columns\"\u003C/span>\u003Cspan class=\"nt\">></slot>\u003C/span>\n      \u003Cspan class=\"nt\"></tr>\u003C/span>\n    \u003Cspan class=\"nt\"></tbody>\u003C/span>\n  \u003Cspan class=\"nt\"></table>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\n\u003Cspan class=\"c\"><!-- Parent usage -->\u003C/span>\n\u003Cspan class=\"nt\"><Table\u003C/span> \u003Cspan class=\"na\">:columns=\u003C/span>\u003Cspan class=\"s\">\"tableColumns\"\u003C/span> \u003Cspan class=\"na\">:data=\u003C/span>\u003Cspan class=\"s\">\"tableData\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n  \u003Cspan class=\"nt\"><template\u003C/span> \u003Cspan class=\"na\">#header\u003C/span>\u003Cspan class=\"err\">=\"\u003C/span>\u003Cspan class=\"na\">headerProps\u003C/span>\u003Cspan class=\"err\">\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><th\u003C/span> \u003Cspan class=\"na\">v-for=\u003C/span>\u003Cspan class=\"s\">\"col in headerProps.columns\"\u003C/span> \u003Cspan class=\"na\">:key=\u003C/span>\u003Cspan class=\"s\">\"col.id\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n      {{ col.title }}\n    \u003Cspan class=\"nt\"></th>\u003C/span>\n  \u003Cspan class=\"nt\"></template>\u003C/span>\n\n  \u003Cspan class=\"nt\"><template\u003C/span> \u003Cspan class=\"na\">#body\u003C/span>\u003Cspan class=\"err\">=\"\u003C/span>\u003Cspan class=\"na\">bodyProps\u003C/span>\u003Cspan class=\"err\">\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><td\u003C/span> \u003Cspan class=\"na\">v-for=\u003C/span>\u003Cspan class=\"s\">\"col in bodyProps.columns\"\u003C/span> \u003Cspan class=\"na\">:key=\u003C/span>\u003Cspan class=\"s\">\"col.id\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n      {{ bodyProps.row[col.field] }}\n    \u003Cspan class=\"nt\"></td>\u003C/span>\n  \u003Cspan class=\"nt\"></template>\u003C/span>\n\u003Cspan class=\"nt\"></Table>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"c1\">// Child component Table.jsx\u003C/span>\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">Table\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"k\">return \u003C/span>\u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">table\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">thead\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n        \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">tr\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n          \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">header\u003C/span>\u003Cspan class=\"p\">?.({\u003C/span> \u003Cspan class=\"na\">columns\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">columns\u003C/span> \u003Cspan class=\"p\">})\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n        \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">tr\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">thead\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">tbody\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n        \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">data\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">map\u003C/span>\u003Cspan class=\"p\">((\u003C/span>\u003Cspan class=\"nx\">row\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">(\u003C/span>\n          \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">tr\u003C/span> \u003Cspan class=\"na\">key\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">row\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">id\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n            \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">body\u003C/span>\u003Cspan class=\"p\">?.({\u003C/span> \u003Cspan class=\"na\">row\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">row\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"na\">columns\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">columns\u003C/span> \u003Cspan class=\"p\">})\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n          \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">tr\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n        \u003Cspan class=\"p\">))\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n      \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">tbody\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n    \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">table\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\n\u003Cspan class=\"c1\">// Parent usage\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Table\u003C/span>\n  \u003Cspan class=\"na\">columns\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">tableColumns\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">data\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">tableData\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">header\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">headerProps\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><>\u003C/span>\n      \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">headerProps\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">columns\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">map\u003C/span>\u003Cspan class=\"p\">((\u003C/span>\u003Cspan class=\"nx\">col\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">(\u003C/span>\n        \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">th\u003C/span> \u003Cspan class=\"na\">key\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">col\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">id\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">col\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">title\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">th\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\">))\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n    \u003Cspan class=\"p\"></>\u003C/span>\n  \u003Cspan class=\"p\">)\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n  \u003Cspan class=\"na\">body\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">bodyProps\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><>\u003C/span>\n      \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">bodyProps\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">columns\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">map\u003C/span>\u003Cspan class=\"p\">((\u003C/span>\u003Cspan class=\"nx\">col\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">(\u003C/span>\n        \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">td\u003C/span> \u003Cspan class=\"na\">key\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">col\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">id\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">bodyProps\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">row\u003C/span>\u003Cspan class=\"p\">[\u003C/span>\u003Cspan class=\"nx\">col\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">field\u003C/span>\u003Cspan class=\"p\">]\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">td\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\">))\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n    \u003Cspan class=\"p\"></>\u003C/span>\n  \u003Cspan class=\"p\">)\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Compilation strategy\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Named function props\u003C/strong>: Named scoped slots are converted into function props\u003C/li>\n\u003Cli>\n\u003Cstrong>Parameter passing\u003C/strong>: Correctly passes scoped parameters\u003C/li>\n\u003Cli>\n\u003Cstrong>Fragment wrapping\u003C/strong>: Multiple elements are wrapped in a Fragment\u003C/li>\n\u003Cli>\n\u003Cstrong>Type safety\u003C/strong>: Preserves TypeScript type definition integrity\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"slot-fallback-content\" href=\"#slot-fallback-content\">\n  \u003C/a>\n  Slot fallback content\n\u003C/h3>\n\n\u003Cp>Vue supports providing default content in slot definitions, displayed when the parent component does not provide slot content.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"c\"><!-- Child component Button.vue -->\u003C/span>\n\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><button\u003C/span> \u003Cspan class=\"na\">class=\u003C/span>\u003Cspan class=\"s\">\"btn\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><slot>\u003C/span>\n      \u003Cspan class=\"nt\"><span\u003C/span> \u003Cspan class=\"na\">class=\u003C/span>\u003Cspan class=\"s\">\"default-text\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Click me\u003Cspan class=\"nt\"></span>\u003C/span>\n    \u003Cspan class=\"nt\"></slot>\u003C/span>\n  \u003Cspan class=\"nt\"></button>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"c1\">// Child component Button.jsx\u003C/span>\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">Button\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"k\">return \u003C/span>\u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">button\u003C/span> \u003Cspan class=\"na\">className\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"btn\"\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">children\u003C/span> \u003Cspan class=\"o\">||\u003C/span> \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">span\u003C/span> \u003Cspan class=\"na\">className\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"s\">\"default-text\"\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Click me\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">span\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n    \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">button\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Fallback content handling rules\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Conditional rendering\u003C/strong>: Uses the \u003Ccode>||\u003C/code> operator to check if children exists\u003C/li>\n\u003Cli>\n\u003Cstrong>Default value provision\u003C/strong>: Renders fallback content when children is falsy\u003C/li>\n\u003Cli>\n\u003Cstrong>React pattern\u003C/strong>: Uses standard React conditional rendering patterns\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"dynamic-slot-names\" href=\"#dynamic-slot-names\">\n  \u003C/a>\n  Dynamic slot names\n\u003C/h3>\n\n\u003Cp>Vue supports dynamic slot names for more flexible slot selection.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"c\"><!-- Child component DynamicSlot.vue -->\u003C/span>\n\u003Cspan class=\"nt\"><template>\u003C/span>\n  \u003Cspan class=\"nt\"><div>\u003C/span>\n    \u003Cspan class=\"nt\"><slot\u003C/span> \u003Cspan class=\"na\">:name=\u003C/span>\u003Cspan class=\"s\">\"dynamicSlotName\"\u003C/span>\u003Cspan class=\"nt\">></slot>\u003C/span>\n  \u003Cspan class=\"nt\"></div>\u003C/span>\n\u003Cspan class=\"nt\"></template>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"c1\">// Child component DynamicSlot.jsx\u003C/span>\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">DynamicSlot\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"k\">return \u003C/span>\u003Cspan class=\"p\">(\u003C/span>\n    \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">[\u003C/span>\u003Cspan class=\"nx\">dynamicSlotName\u003C/span>\u003Cspan class=\"p\">]\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\n    \u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">div\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\">);\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Dynamic slot handling\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Computed property name\u003C/strong>: Uses object computed property syntax to receive dynamic slots\u003C/li>\n\u003Cli>\n\u003Cstrong>Runtime determination\u003C/strong>: The slot name is determined at runtime\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"compilation-strategy-summary\" href=\"#compilation-strategy-summary\">\n  \u003C/a>\n  Compilation strategy summary\n\u003C/h3>\n\n\u003Cp>VuReact's \u003Ccode><slot>\u003C/code> compilation strategy demonstrates a \u003Cstrong>complete slot system conversion capability\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Default slots\u003C/strong>: Converted to React's \u003Ccode>children\u003C/code>\n\u003C/li>\n\u003Cli>\n\u003Cstrong>Named slots\u003C/strong>: Converted to component props\u003C/li>\n\u003Cli>\n\u003Cstrong>Scoped slots\u003C/strong>: Converted to function children or function props\u003C/li>\n\u003Cli>\n\u003Cstrong>Fallback content\u003C/strong>: Supports slot default content\u003C/li>\n\u003Cli>\n\u003Cstrong>Dynamic slots\u003C/strong>: Supports dynamic slot names\u003C/li>\n\u003C/ol>\n\n\u003Cp>\u003Cstrong>Slot type mapping table\u003C/strong>:\u003C/p>\n\n\u003Cdiv class=\"table-wrapper-paragraph\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Vue slot type\u003C/th>\n\u003Cth>React equivalent\u003C/th>\n\u003Cth>Description\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode><slot>\u003C/code>\u003C/td>\n\u003Ctd>\u003Ccode>children\u003C/code>\u003C/td>\n\u003Ctd>Default slot, as child elements of the component\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><slot name=\"xxx\">\u003C/code>\u003C/td>\n\u003Ctd>\n\u003Ccode>xxx\u003C/code> prop\u003C/td>\n\u003Ctd>Named slot, as a property of the component\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><slot :prop=\"value\">\u003C/code>\u003C/td>\n\u003Ctd>Function \u003Ccode>children\u003C/code>\n\u003C/td>\n\u003Ctd>Scoped slot, as a function receiving parameters\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><slot name=\"xxx\" :prop=\"value\">\u003C/code>\u003C/td>\n\u003Ctd>Function \u003Ccode>xxx\u003C/code> prop\u003C/td>\n\u003Ctd>Named scoped slot, as a function prop\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\u003C/div>\n\n\u003Cp>\u003Cstrong>Performance optimization strategy\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Static slot optimization\u003C/strong>: Static slot content is compiled into static JSX\u003C/li>\n\u003Cli>\n\u003Cstrong>Function caching\u003C/strong>: For scoped slots, render functions are intelligently cached\u003C/li>\n\u003Cli>\n\u003Cstrong>On-demand generation\u003C/strong>: The most minimal code is generated based on actual usage\u003C/li>\n\u003Cli>\n\u003Cstrong>Type inference\u003C/strong>: Supports intelligent inference of slot type definitions in TypeScript\u003C/li>\n\u003C/ol>\n\n\u003Cp>VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite slot logic. The compiled code preserves Vue's semantics and flexibility while following React's component design patterns, keeping the migrated application fully capable of content distribution.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"related-links\" href=\"#related-links\">\n  \u003C/a>\n  Related Links\n\u003C/h2>\n\n\u003Cul>\n\u003Cli>Docs: \u003Ca href=\"https://vureact.top/en/guide/semantic-comparison/template/slot.html\" target=\"_blank\" rel=\"noopener noreferrer\">https://vureact.top/en/guide/semantic-comparison/template/slot.html\u003C/a>\n\u003C/li>\n\u003Cli>GitHub: \u003Ca href=\"https://github.com/vureact-js/core\" target=\"_blank\" rel=\"noopener noreferrer\">https://github.com/vureact-js/core\u003C/a>\n\u003C/li>\n\u003C/ul>\n\n","[VuReact](https://vureact.top/en/guide/introduction.html) is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's common `\u003Cslot>` mechanism is compiled into React code by VuReact.\n\n## Before We Start\n\nTo keep the examples easy to read, this article follows two simple conventions:\n\n1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\n2. The discussion assumes you are already familiar with Vue 3's slot usage.\n\n## Compilation Mapping\n\n### Default slot: `\u003Cslot>`\n\nThe default slot is Vue's most basic slot form, used to receive default content passed from the parent component.\n\n- Vue\n\n```html\n\u003C!-- Child component Child.vue -->\n\u003Ctemplate>\n  \u003Cdiv class=\"container\">\n    \u003Cslot>\u003C/slot>\n  \u003C/div>\n\u003C/template>\n\n\u003C!-- Parent usage -->\n\u003CChild>\n  \u003Cp>This is slot content\u003C/p>\n\u003C/Child>\n```\n\n- Compiled React\n\n```jsx\n// Child component Child.jsx\nfunction Child(props) {\n  return (\n    \u003Cdiv className=\"container\">\n      {props.children}\n    \u003C/div>\n  );\n}\n\n// Parent usage\n\u003CChild>\n  \u003Cp>This is slot content\u003C/p>\n\u003C/Child>\n```\n\nAs the example shows, Vue's `\u003Cslot>` element is compiled into React's `children` prop. VuReact adopts a **children compilation strategy**, converting the slot outlet into React's standard children receiving mechanism. This **fully preserves Vue's default slot semantics** — receiving child content passed from the parent component and rendering it.\n\nThe key characteristics of this compilation approach are:\n\n1. **Semantic consistency**: Fully simulates Vue's default slot behavior by implementing content distribution\n2. **React-native support**: Uses React's standard children mechanism with no additional adaptation needed\n3. **Clean syntax**: Vue's `\u003Cslot>` is simplified to a `{children}` expression\n4. **Performance optimization**: Uses React's native mechanism directly with zero runtime overhead\n\n---\n\n### Named slots: `\u003Cslot name=\"xxx\">`\n\nNamed slots allow a component to define multiple slot outlets, and the parent component can specify where content should be inserted by name.\n\n- Vue\n\n```html\n\u003C!-- Child component Layout.vue -->\n\u003Ctemplate>\n  \u003Cdiv class=\"layout\">\n    \u003Cheader>\n      \u003Cslot name=\"header\">\u003C/slot>\n    \u003C/header>\n    \u003Cmain>\n      \u003Cslot>\u003C/slot>\n    \u003C/main>\n    \u003Cfooter>\n      \u003Cslot name=\"footer\">\u003C/slot>\n    \u003C/footer>\n  \u003C/div>\n\u003C/template>\n\n\u003C!-- Parent usage -->\n\u003CLayout>\n  \u003Ctemplate #header>\n    \u003Ch1>Page Title\u003C/h1>\n  \u003C/template>\n  \n  \u003Cp>Main content\u003C/p>\n  \n  \u003Ctemplate #footer>\n    \u003Cp>Copyright information\u003C/p>\n  \u003C/template>\n\u003C/Layout>\n```\n\n- Compiled React\n\n```jsx\n// Child component Layout.jsx\nfunction Layout(props) {\n  return (\n    \u003Cdiv className=\"layout\">\n      \u003Cheader>{props.header}\u003C/header>\n      \u003Cmain>{props.children}\u003C/main>\n      \u003Cfooter>{props.footer}\u003C/footer>\n    \u003C/div>\n  );\n}\n\n// Parent usage\n\u003CLayout\n  header={\u003Ch1>Page Title\u003C/h1>}\n  footer={\u003Cp>Copyright information\u003C/p>}\n>\n  \u003Cp>Main content\u003C/p>\n\u003C/Layout>\n```\n\nAs the example shows, Vue's named slots `\u003Cslot name=\"xxx\">` are compiled into React props. VuReact adopts a **props compilation strategy**, converting named slot outlets into component props. This **fully preserves Vue's named slot semantics** — distinguishing different slot content through different prop names.\n\n**Compilation rules**:\n\n1. **Slot name mapping**: `\u003Cslot name=\"header\">` → `header` prop\n2. **Default slot**: `\u003Cslot>` → `children` prop\n3. **Props receiving**: Destructure all slot props in the component function parameters\n\n---\n\n### Scoped slots: `\u003Cslot :prop=\"value\">`\n\nScoped slots allow child components to pass data to slot content, enabling more flexible render control.\n\n- Vue\n\n```html\n\u003C!-- Child component List.vue -->\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"(item, i) in props.items\" :key=\"item.id\">\n      \u003Cslot :item=\"item\" :index=\"i\">\u003C/slot>\n    \u003C/li>\n  \u003C/ul>\n\u003C/template>\n\n\u003C!-- Parent usage -->\n\u003CList :items=\"users\">\n  \u003Ctemplate v-slot=\"slotProps\">\n    \u003Cdiv class=\"user-item\">\n      {{ slotProps.index + 1 }}. {{ slotProps.item.name }}\n    \u003C/div>\n  \u003C/template>\n\u003C/List>\n```\n\n- Compiled React\n\n```jsx\n// Child component List.jsx\nfunction List(props) {\n  return (\n    \u003Cul>\n      {props.items.map((item, index) => (\n        \u003Cli key={item.id}>\n          {props.children?.({ item, index })}\n        \u003C/li>\n      ))}\n    \u003C/ul>\n  );\n}\n\n// Parent usage\n\u003CList \n  items={users}\n  children={(slotProps) => (\n    \u003Cdiv className=\"user-item\">\n      {slotProps.index + 1}. {slotProps.item.name}\n    \u003C/div>\n  )}\n/>\n```\n\nAs the example shows, Vue's scoped slots are compiled into React function children. VuReact adopts a **function children compilation strategy**, converting scoped slot outlets into functions that receive parameters. This **fully preserves Vue's scoped slot semantics** — the child component passes data to the parent through function calls, and the parent receives data and renders via function parameters.\n\n**Compilation rules**:\n\n1. **Slot attribute conversion**: `\u003Cslot :item=\"item\" :index=\"i\">` → function parameter `{ item, index }`\n2. **Function invocation**: Calls the `children()` function at the render location and passes data\n3. **Optional chaining guard**: Uses `?.` to prevent errors when no slot content is provided\n\n---\n\n### Named scoped slots: `\u003Cslot name=\"xxx\" :prop=\"value\">`\n\nNamed scoped slots combine the features of both named slots and scoped slots.\n\n- Vue\n\n```html\n\u003C!-- Child component Table.vue -->\n\u003Ctemplate>\n  \u003Ctable>\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cslot name=\"header\" :columns=\"props.columns\">\u003C/slot>\n      \u003C/tr>\n    \u003C/thead>\n    \u003Ctbody>\n      \u003Ctr v-for=\"row in props.data\" :key=\"row.id\">\n        \u003Cslot name=\"body\" :row=\"row\" :columns=\"props.columns\">\u003C/slot>\n      \u003C/tr>\n    \u003C/tbody>\n  \u003C/table>\n\u003C/template>\n\n\u003C!-- Parent usage -->\n\u003CTable :columns=\"tableColumns\" :data=\"tableData\">\n  \u003Ctemplate #header=\"headerProps\">\n    \u003Cth v-for=\"col in headerProps.columns\" :key=\"col.id\">\n      {{ col.title }}\n    \u003C/th>\n  \u003C/template>\n  \n  \u003Ctemplate #body=\"bodyProps\">\n    \u003Ctd v-for=\"col in bodyProps.columns\" :key=\"col.id\">\n      {{ bodyProps.row[col.field] }}\n    \u003C/td>\n  \u003C/template>\n\u003C/Table>\n```\n\n- Compiled React\n\n```jsx\n// Child component Table.jsx\nfunction Table(props) {\n  return (\n    \u003Ctable>\n      \u003Cthead>\n        \u003Ctr>\n          {props.header?.({ columns: props.columns })}\n        \u003C/tr>\n      \u003C/thead>\n      \u003Ctbody>\n        {props.data.map((row) => (\n          \u003Ctr key={row.id}>\n            {props.body?.({ row: row, columns: props.columns })}\n          \u003C/tr>\n        ))}\n      \u003C/tbody>\n    \u003C/table>\n  );\n}\n\n// Parent usage\n\u003CTable\n  columns={tableColumns}\n  data={tableData}\n  header={(headerProps) => (\n    \u003C>\n      {headerProps.columns.map((col) => (\n        \u003Cth key={col.id}>{col.title}\u003C/th>\n      ))}\n    \u003C/>\n  )}\n  body={(bodyProps) => (\n    \u003C>\n      {bodyProps.columns.map((col) => (\n        \u003Ctd key={col.id}>{bodyProps.row[col.field]}\u003C/td>\n      ))}\n    \u003C/>\n  )}\n/>\n```\n\n**Compilation strategy**:\n\n1. **Named function props**: Named scoped slots are converted into function props\n2. **Parameter passing**: Correctly passes scoped parameters\n3. **Fragment wrapping**: Multiple elements are wrapped in a Fragment\n4. **Type safety**: Preserves TypeScript type definition integrity\n\n---\n\n### Slot fallback content\n\nVue supports providing default content in slot definitions, displayed when the parent component does not provide slot content.\n\n- Vue\n\n```html\n\u003C!-- Child component Button.vue -->\n\u003Ctemplate>\n  \u003Cbutton class=\"btn\">\n    \u003Cslot>\n      \u003Cspan class=\"default-text\">Click me\u003C/span>\n    \u003C/slot>\n  \u003C/button>\n\u003C/template>\n```\n\n- Compiled React\n\n```jsx\n// Child component Button.jsx\nfunction Button(props) {\n  return (\n    \u003Cbutton className=\"btn\">\n      {props.children || \u003Cspan className=\"default-text\">Click me\u003C/span>}\n    \u003C/button>\n  );\n}\n```\n\n**Fallback content handling rules**:\n\n1. **Conditional rendering**: Uses the `||` operator to check if children exists\n2. **Default value provision**: Renders fallback content when children is falsy\n3. **React pattern**: Uses standard React conditional rendering patterns\n\n---\n\n### Dynamic slot names\n\nVue supports dynamic slot names for more flexible slot selection.\n\n- Vue\n\n```html\n\u003C!-- Child component DynamicSlot.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cslot :name=\"dynamicSlotName\">\u003C/slot>\n  \u003C/div>\n\u003C/template>\n```\n\n- Compiled React\n\n```jsx\n// Child component DynamicSlot.jsx\nfunction DynamicSlot(props) {\n  return (\n    \u003Cdiv>\n      {props[dynamicSlotName]}\n    \u003C/div>\n  );\n}\n```\n\n**Dynamic slot handling**:\n\n1. **Computed property name**: Uses object computed property syntax to receive dynamic slots\n2. **Runtime determination**: The slot name is determined at runtime\n\n---\n\n### Compilation strategy summary\n\nVuReact's `\u003Cslot>` compilation strategy demonstrates a **complete slot system conversion capability**:\n\n1. **Default slots**: Converted to React's `children`\n2. **Named slots**: Converted to component props\n3. **Scoped slots**: Converted to function children or function props\n4. **Fallback content**: Supports slot default content\n5. **Dynamic slots**: Supports dynamic slot names\n\n**Slot type mapping table**:\n\n| Vue slot type | React equivalent | Description |\n|-------------|---------------|------|\n| `\u003Cslot>` | `children` | Default slot, as child elements of the component |\n| `\u003Cslot name=\"xxx\">` | `xxx` prop | Named slot, as a property of the component |\n| `\u003Cslot :prop=\"value\">` | Function `children` | Scoped slot, as a function receiving parameters |\n| `\u003Cslot name=\"xxx\" :prop=\"value\">` | Function `xxx` prop | Named scoped slot, as a function prop |\n\n**Performance optimization strategy**:\n\n1. **Static slot optimization**: Static slot content is compiled into static JSX\n2. **Function caching**: For scoped slots, render functions are intelligently cached\n3. **On-demand generation**: The most minimal code is generated based on actual usage\n4. **Type inference**: Supports intelligent inference of slot type definitions in TypeScript\n\nVuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite slot logic. The compiled code preserves Vue's semantics and flexibility while following React's component design patterns, keeping the migrated application fully capable of content distribution.\n\n## Related Links\n\n- Docs: \u003Chttps://vureact.top/en/guide/semantic-comparison/template/slot.html>\n- GitHub: \u003Chttps://github.com/vureact-js/core>\n",{"name":30,"username":31,"twitter_username":13,"github_username":31,"user_id":32,"website_url":33,"profile_image":34,"profile_image_90":35},"Ryan John","smirk9581",3937044,"https://github.com/smirk9581","https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png","https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png",1780372426392]