CODEWITHSUNDEEP
vue.jsjsxslot
Jack.C
Jack.C

Reputation: 21

How to get vue slot property in JSX?

I write a child component used template syntax, child component has a slot that transmits 'item' property to parent component, but parent component use JSX syntax, now I have trouble how to get 'item' property in JSX. Any help would be greatly appreciated!

// child.vue
<template>
  <Autocomplete>
    <template slot-scope="{ item }">
      <slot :item="item" />
    </template>
  </Autocomplete>
</template>

// parent.vue
export default {
  render () {
    return (
      <Child>
        <template slot-scope='{item}'>
          <span>{item}</span> // item is not defined 
        </template>
      </Child>
    )
  }
}

Upvotes: 2

Views: 6125

Answers (2)

tony19
tony19

Reputation: 138696

You can pass the slots as a scopedSlots prop (Vue 2) with a default function (representing the default slot). Note this is especially needed for non-default named slots (e.g., "mySlot" as shown in the example):

export default {
  render() {
    return (
      <Child
        {
          ...{
            scopedSlots: {
              default: ({ item }) => <span>{ item.foo }</span>,
              mySlot: ({ myProp }) => <h1>{ myProp }</h1>,
            }
          }
        }
      />
    )
  }
}

Or you can pass a default-slot rendering method within the <Child> body:

export default {
  render() {
    return (
      <Child>
        { ({ item }) => <span>{ item.foo }</span> }
      </Child>
    )
  }
}

Upvotes: 8

Felipe Malara
Felipe Malara

Reputation: 1914

Can you try this?

// child.vue
<template>
  <Autocomplete>
    <template v-slot="{ item }">
      <slot :item="item" />
    </template>
  </Autocomplete>
</template>

And in the parent component:

// JSX
{
  render () {
    return (
      <Child>
        <template v-slot="{ item }">
          <span>{{item}}</span> // item is not defined 
        </template>
      </Child>
    )
  }
}

Upvotes: 0

Related Questions