[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"3760003":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":20,"edited_at":13,"crossposted_at":13,"published_at":14,"last_comment_at":14,"reading_time_minutes":21,"tag_list":22,"tags":23,"body_html":28,"body_markdown":29,"user":30},"article",3760003,"Vue v-slot to React: How does VuReact handle it?","VuReact is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In...","May 27","vue-v-slot-to-react-how-does-vureact-handle-it-26le","/smirk9581/vue-v-slot-to-react-how-does-vureact-handle-it-26le","https://dev.to/smirk9581/vue-v-slot-to-react-how-does-vureact-handle-it-26le",0,null,"2026-05-27T13:30:00Z","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%2Fgqmbq7prs42vl0qvreml.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%2Fgqmbq7prs42vl0qvreml.png","https://vureact.top/en/guide/semantic-comparison/template/v-slot.html","2026-05-27T00:37:04Z",4,"webdev, javascript, vue, react",[24,25,26,27],"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 for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common \u003Ccode>v-slot\u003C/code> directive 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 \u003Ccode>v-slot\u003C/code> directive 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=\"vslot-basic-slot-usage\" href=\"#vslot-basic-slot-usage\">\n  \u003C/a>\n  v-slot / #: Basic slot usage\n\u003C/h3>\n\n\u003Cp>\u003Ccode>v-slot\u003C/code> (shorthand \u003Ccode>#\u003C/code>) is Vue's directive for defining and using slots, enabling content distribution and reuse in components.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"default-slot\" href=\"#default-slot\">\n  \u003C/a>\n  Default slot\n\u003C/h4>\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\"><!-- Parent component -->\u003C/span>\n\u003Cspan class=\"nt\"><MyComponent>\u003C/span>\n  \u003Cspan class=\"nt\"><template\u003C/span> \u003Cspan class=\"na\">#default\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><p>\u003C/span>Default slot content\u003Cspan class=\"nt\"></p>\u003C/span>\n  \u003Cspan class=\"nt\"></template>\u003C/span>\n\u003Cspan class=\"nt\"></MyComponent>\u003C/span>\n\n\u003Cspan class=\"c\"><!-- Or shorthand -->\u003C/span>\n\u003Cspan class=\"nt\"><MyComponent>\u003C/span>\n  \u003Cspan class=\"nt\"><p>\u003C/span>Default slot content\u003Cspan class=\"nt\"></p>\u003C/span>\n\u003Cspan class=\"nt\"></MyComponent>\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\">// Parent component\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">MyComponent\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n  \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Default 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\">MyComponent\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 default slot is directly compiled into React's children. VuReact adopts a \u003Cstrong>children compilation strategy\u003C/strong>, converting template slots into React's standard children passing mechanism. This \u003Cstrong>fully preserves Vue's default slot semantics\u003C/strong> — passing content as child elements to the component.\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>Simplified syntax\u003C/strong>: Vue's \u003Ccode><template #default>\u003C/code> is simplified to directly passing child elements\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\" href=\"#named-slots\">\n  \u003C/a>\n  Named slots\n\u003C/h3>\n\n\u003Cp>Vue supports multiple named slots for more flexible content distribution.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"basic-named-slots\" href=\"#basic-named-slots\">\n  \u003C/a>\n  Basic named slots\n\u003C/h4>\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\"><!-- Parent component -->\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\"><template\u003C/span> \u003Cspan class=\"na\">#main\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    \u003Cspan class=\"nt\"><p>\u003C/span>Main content area\u003Cspan class=\"nt\"></p>\u003C/span>\n  \u003Cspan class=\"nt\"></template>\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>Footer 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\">// Parent component\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\">main\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>Main content area\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">p\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>Footer 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\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 are compiled into React props. VuReact adopts a \u003Cstrong>props compilation strategy\u003C/strong>, converting named slots 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\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"scoped-slots\" href=\"#scoped-slots\">\n  \u003C/a>\n  Scoped slots\n\u003C/h3>\n\n\u003Cp>Vue's scoped slots allow child components to pass data back to parent components, enabling more flexible render control.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"basic-scoped-slots\" href=\"#basic-scoped-slots\">\n  \u003C/a>\n  Basic scoped slots\n\u003C/h4>\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\"><!-- Parent component -->\u003C/span>\n\u003Cspan class=\"nt\"><DataList\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\">#item\u003C/span>\u003Cspan class=\"err\">=\"\u003C/span>\u003Cspan class=\"na\">slotProps\u003C/span>\u003Cspan class=\"err\">\"\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      \u003Cspan class=\"nt\"><span>\u003C/span>{{ slotProps.user.name }}\u003Cspan class=\"nt\"></span>\u003C/span>\n      \u003Cspan class=\"nt\"><span>\u003C/span>{{ slotProps.user.age }} years old\u003Cspan class=\"nt\"></span>\u003C/span>\n    \u003Cspan class=\"nt\"></div>\u003C/span>\n  \u003Cspan class=\"nt\"></template>\u003C/span>\n\u003Cspan class=\"nt\"></DataList>\u003C/span>\n\n\u003Cspan class=\"c\"><!-- Child component DataList.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 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\">name=\u003C/span>\u003Cspan class=\"s\">\"item\"\u003C/span> \u003Cspan class=\"na\">:user=\u003C/span>\u003Cspan class=\"s\">\"item\"\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\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\">// Parent component\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">DataList\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\">item\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=\"p\"><\u003C/span>\u003Cspan class=\"nt\">span\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">slotProps\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">user\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">name\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">span\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n      \u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">span\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">slotProps\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">user\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">age\u003C/span>\u003Cspan class=\"si\">}\u003C/span> years old\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">span\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>\u003Cspan class=\"si\">}\u003C/span>\n\u003Cspan class=\"p\">/>\u003C/span>\n\n\u003Cspan class=\"c1\">// Child component DataList.jsx\u003C/span>\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">DataList\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\">itemData\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\">itemData\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\">item\u003C/span>\u003Cspan class=\"p\">?.({\u003C/span> \u003Cspan class=\"na\">user\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">itemData\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\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 props. VuReact adopts a \u003Cstrong>function props compilation strategy\u003C/strong>, converting scoped slots into function props 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\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=\"nt\"><BaseLayout>\u003C/span>\n  \u003Cspan class=\"nt\"><template\u003C/span> \u003Cspan class=\"na\">#\u003C/span>\u003Cspan class=\"err\">[\u003C/span>\u003Cspan class=\"na\">dynamicSlotName\u003C/span>\u003Cspan class=\"err\">]\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n    Dynamic slot content\n  \u003Cspan class=\"nt\"></template>\u003C/span>\n\u003Cspan class=\"nt\"></BaseLayout>\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=\"p\"><\u003C/span>\u003Cspan class=\"nc\">BaseLayout\u003C/span> \n  \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">...{\u003C/span> \u003Cspan class=\"p\">[\u003C/span>\u003Cspan class=\"nx\">dynamicSlotName\u003C/span>\u003Cspan class=\"p\">]:\u003C/span> \u003Cspan class=\"dl\">\"\u003C/span>\u003Cspan class=\"s2\">Dynamic slot content\u003C/span>\u003Cspan class=\"dl\">\"\u003C/span> \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>Computed property name\u003C/strong>: Uses the object computed property syntax \u003Ccode>{ [key]: value }\u003C/code>\n\u003C/li>\n\u003Cli>\n\u003Cstrong>Object spread\u003C/strong>: Applies to the component via the object spread syntax\u003C/li>\n\u003Cli>\n\u003Cstrong>Runtime processing\u003C/strong>: Dynamic slot names need to be determined at runtime\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>Default button text\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=\"p\">>\u003C/span>Default button text\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>children check\u003C/strong>: Checks whether children exists\u003C/li>\n\u003Cli>\n\u003Cstrong>Default value rendering\u003C/strong>: Renders fallback content when children is falsy\u003C/li>\n\u003Cli>\n\u003Cstrong>React compatible\u003C/strong>: Uses React's standard conditional rendering pattern\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 v-slot 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 children\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 props\u003C/li>\n\u003Cli>\n\u003Cstrong>Dynamic slots\u003C/strong>: Supports dynamic slot names\u003C/li>\n\u003Cli>\n\u003Cstrong>Fallback content\u003C/strong>: Supports slot default content\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>Default slot\u003C/td>\n\u003Ctd>\u003Ccode>children\u003C/code>\u003C/td>\n\u003Ctd>As child elements of the component\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Named slot\u003C/td>\n\u003Ctd>\u003Ccode>prop\u003C/code>\u003C/td>\n\u003Ctd>As a property of the component\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Scoped slot\u003C/td>\n\u003Ctd>\u003Ccode>function prop\u003C/code>\u003C/td>\n\u003Ctd>As a function property that receives parameters\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>Dynamic slot\u003C/td>\n\u003Ctd>\u003Ccode>computed property\u003C/code>\u003C/td>\n\u003Ctd>Uses object computed property syntax\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>: Slot type definitions are intelligently inferred\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/v-slot.html\" target=\"_blank\" rel=\"noopener noreferrer\">https://vureact.top/en/guide/semantic-comparison/template/v-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 for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common `v-slot` directive 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 `v-slot` directive usage.\n\n## Compilation Mapping\n\n### v-slot / #: Basic slot usage\n\n`v-slot` (shorthand `#`) is Vue's directive for defining and using slots, enabling content distribution and reuse in components.\n\n#### Default slot\n\n- Vue\n\n```html\n\u003C!-- Parent component -->\n\u003CMyComponent>\n  \u003Ctemplate #default>\n    \u003Cp>Default slot content\u003C/p>\n  \u003C/template>\n\u003C/MyComponent>\n\n\u003C!-- Or shorthand -->\n\u003CMyComponent>\n  \u003Cp>Default slot content\u003C/p>\n\u003C/MyComponent>\n```\n\n- Compiled React\n\n```jsx\n// Parent component\n\u003CMyComponent>\n  \u003Cp>Default slot content\u003C/p>\n\u003C/MyComponent>\n```\n\nAs the example shows, Vue's default slot is directly compiled into React's children. VuReact adopts a **children compilation strategy**, converting template slots into React's standard children passing mechanism. This **fully preserves Vue's default slot semantics** — passing content as child elements to the component.\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. **Simplified syntax**: Vue's `\u003Ctemplate #default>` is simplified to directly passing child elements\n4. **Performance optimization**: Uses React's native mechanism directly with zero runtime overhead\n\n---\n\n### Named slots\n\nVue supports multiple named slots for more flexible content distribution.\n\n#### Basic named slots\n\n- Vue\n\n```html\n\u003C!-- Parent component -->\n\u003CLayout>\n  \u003Ctemplate #header>\n    \u003Ch1>Page Title\u003C/h1>\n  \u003C/template>\n  \n  \u003Ctemplate #main>\n    \u003Cp>Main content area\u003C/p>\n  \u003C/template>\n  \n  \u003Ctemplate #footer>\n    \u003Cp>Footer information\u003C/p>\n  \u003C/template>\n\u003C/Layout>\n```\n\n- Compiled React\n\n```jsx\n// Parent component\n\u003CLayout \n  header={\u003Ch1>Page Title\u003C/h1>}\n  main={\u003Cp>Main content area\u003C/p>}\n  footer={\u003Cp>Footer information\u003C/p>}\n/>\n```\n\nAs the example shows, Vue's named slots are compiled into React props. VuReact adopts a **props compilation strategy**, converting named slots into component props. This **fully preserves Vue's named slot semantics** — distinguishing different slot content through different prop names.\n\n---\n\n### Scoped slots\n\nVue's scoped slots allow child components to pass data back to parent components, enabling more flexible render control.\n\n#### Basic scoped slots\n\n- Vue\n\n```html\n\u003C!-- Parent component -->\n\u003CDataList :items=\"users\">\n  \u003Ctemplate #item=\"slotProps\">\n    \u003Cdiv class=\"user-item\">\n      \u003Cspan>{{ slotProps.user.name }}\u003C/span>\n      \u003Cspan>{{ slotProps.user.age }} years old\u003C/span>\n    \u003C/div>\n  \u003C/template>\n\u003C/DataList>\n\n\u003C!-- Child component DataList.vue -->\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"item in props.items\" :key=\"item.id\">\n      \u003Cslot name=\"item\" :user=\"item\">\u003C/slot>\n    \u003C/li>\n  \u003C/ul>\n\u003C/template>\n```\n\n- Compiled React\n\n```jsx\n// Parent component\n\u003CDataList \n  items={users}\n  item={(slotProps) => (\n    \u003Cdiv className=\"user-item\">\n      \u003Cspan>{slotProps.user.name}\u003C/span>\n      \u003Cspan>{slotProps.user.age} years old\u003C/span>\n    \u003C/div>\n  )}\n/>\n\n// Child component DataList.jsx\nfunction DataList(props) {\n  return (\n    \u003Cul>\n      {props.items.map((itemData) => (\n        \u003Cli key={itemData.id}>\n          {props.item?.({ user: itemData })}\n        \u003C/li>\n      ))}\n    \u003C/ul>\n  );\n}\n```\n\nAs the example shows, Vue's scoped slots are compiled into React function props. VuReact adopts a **function props compilation strategy**, converting scoped slots into function props 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---\n\n### Dynamic slot names\n\nVue supports dynamic slot names for more flexible slot selection.\n\n- Vue\n\n```html\n\u003CBaseLayout>\n  \u003Ctemplate #[dynamicSlotName]>\n    Dynamic slot content\n  \u003C/template>\n\u003C/BaseLayout>\n```\n\n- Compiled React\n\n```jsx\n\u003CBaseLayout \n  {...{ [dynamicSlotName]: \"Dynamic slot content\" }}\n/>\n```\n\n**Compilation strategy**:\n\n1. **Computed property name**: Uses the object computed property syntax `{ [key]: value }`\n2. **Object spread**: Applies to the component via the object spread syntax\n3. **Runtime processing**: Dynamic slot names need to be determined at runtime\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>Default button text\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>Default button text\u003C/span>}\n    \u003C/button>\n  );\n}\n```\n\n**Fallback content handling rules**:\n\n1. **children check**: Checks whether children exists\n2. **Default value rendering**: Renders fallback content when children is falsy\n3. **React compatible**: Uses React's standard conditional rendering pattern\n\n---\n\n### Compilation strategy summary\n\nVuReact's v-slot 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 props\n4. **Dynamic slots**: Supports dynamic slot names\n5. **Fallback content**: Supports slot default content\n\n**Slot type mapping table**:\n\n| Vue slot type | React equivalent | Description |\n|-------------|---------------|------|\n| Default slot | `children` | As child elements of the component |\n| Named slot | `prop` | As a property of the component |\n| Scoped slot | `function prop` | As a function property that receives parameters |\n| Dynamic slot | `computed property` | Uses object computed property syntax |\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**: Slot type definitions are intelligently inferred\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/v-slot.html>\n- GitHub: \u003Chttps://github.com/vureact-js/core>\n",{"name":31,"username":32,"twitter_username":13,"github_username":32,"user_id":33,"website_url":34,"profile_image":35,"profile_image_90":36},"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",1780059467704]