To take the example from the Vue docs:
// Component with a slot
<ul>
<li v-for="todo in filteredTodos" v-bind:key="todo.id">
<slot name="todo" v-bind:todo="todo">
{{ todo.text }}
</slot>
</li>
</ul>
// Consuming component
<todo-list v-bind:todos="todos">
<template v-slot:todo="{ todo }">
<span v-if="todo.isComplete">x</span>
{{ todo.text }}
</template>
</todo-list>
This can be rewritten in React with much simpler, cleaner code: // Component with a "slot"
<ul>
{filteredTodos.map(todo => props.renderTodo ? props.renderTodo(todo) : todo.text)}
</ul>
// Consuming component
<TodoList todos={todos} renderTodo={todo =>
`${todo.isComplete ? "x " : ""}${todo.text}`
}/>
Simplicity is key. In the React version you don't have to worry about the `slot` syntax, build a mental model of how Vue treats it, or risk running into the limitations of the feature.