如何在Vue的JSX中获取插槽（slot）传递的item属性？

Got it, let’s get this sorted out for you! The issue here is that Vue’s JSX syntax handles scoped slots differently than template syntax—you can’t use <template slot-scope> directly in JSX. Instead, you need to pass a function that receives the slot props (like your item) and returns the JSX you want to render.

Here’s how to modify your parent component: #

Option 1: Pass the slot as a child function (simpler for default slots)

export default {
  render () {
    return (
      <Child>
        {/* The function receives the scoped slot props directly */}
        {({ item }) => (
          <span>{item}</span>
        )}
      </Child>
    )
  }
}

Option 2: Use the scopedSlots prop (more explicit, great for named slots)

If you ever need to work with named slots later, this syntax is clearer:

export default {
  render () {
    return (
      <Child
        scopedSlots={{
          // Match the slot name from your child component (default is the default slot)
          default: ({ item }) => (
            <span>{item}</span>
          )
        }}
      />
    )
  }
}

Why your original code didn’t work #

In Vue’s template syntax, <template slot-scope> is sugar that gets compiled into a function under the hood. But JSX doesn’t recognize this template-specific syntax—you have to write the function explicitly to receive the item prop from the child component’s slot.

This should let you access the item prop properly in your parent component’s JSX now!

内容的提问来源于stack exchange，提问作者Jack.C