In some nested components case, we don't want to pass slot</

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Wow, that actually worked! I was trying to do this: <div class="

Supported slot from Component's inside? about babel-plugin-transform-vue-jsx HOT 7 CLOSED

vuejs commented on April 27, 2024

Supported slot from Component's inside?

from babel-plugin-transform-vue-jsx.

Comments (7)

rwu823 commented on April 27, 2024 7

@yyx990803

For example normal slot usage:

<Tab>
  <TabHead slot="tabhead">
    ...
  </TabHead>
</Tab>

Expect defining from component's inside as well:

// TabHead.js
const TabHead = {
  name: 'TabHead',
  render(h) { 
    return(
      <div slot="tabhead">
         ...
      </div>
    )
  }
}

from babel-plugin-transform-vue-jsx.

nickmessing commented on April 27, 2024 6

@rwu823, you can achieve that by doing:

export default {
  render () {
    return (
      <div>
        {this.$slots.tabhead
          ? <this.$slots.tabhead />
          : <h1>Your content here</h1>} 
      </div>
    )
  }
}

instead of:

export default {
  render () {
    return (
      <div slot="tabhead">
        <h1>Your content here</h1>
      </div>
    )
  }
}

from babel-plugin-transform-vue-jsx.

ShuvoHabib commented on April 27, 2024 1

{this.$slots.default}

from babel-plugin-transform-vue-jsx.

nadimtuhin commented on April 27, 2024

any update?

from babel-plugin-transform-vue-jsx.

blade254353074 commented on April 27, 2024

https://vuejs.org/guide/render-function.html#Functional-Components
https://vuejs.org/api/#vm-slots

from babel-plugin-transform-vue-jsx.

yyx990803 commented on April 27, 2024

I'm not sure if I understand the original request...

from babel-plugin-transform-vue-jsx.

Maxim-Mazurok commented on April 27, 2024

Wow, that actually worked!

I was trying to do this:

<VBreadcrumbs
  class={{ "pl-0": true, [breadcrumbsStyle.root]: true }}
  scopedSlots={{
    item: ({ item }) => (
      <VBreadcrumbsItem>
        <VBtn
          link
          elevation={0}
          small
          color="transparent"
          class="px-2"
          onClick={() => {
            console.log(item);
          }}
        >
          {item.text}
        </VBtn>
      </VBreadcrumbsItem>
    ),
  }}
  slots={{
    divider: () => [<VIcon>{mdiChevronRight}</VIcon>],
  }}
  items={this.breadcrumbs}
>
</VBreadcrumbs>

But this actually worked:

<VBreadcrumbs
  class={{ "pl-0": true, [breadcrumbsStyle.root]: true }}
  // divider={<VIcon>{mdiChevronRight}</VIcon>}
  scopedSlots={{
    item: ({ item }) => (
      <VBreadcrumbsItem>
        <VBtn
          link
          elevation={0}
          small
          color="transparent"
          class="px-2"
          onClick={() => {
            console.log(item);
          }}
        >
          {item.text}
        </VBtn>
      </VBreadcrumbsItem>
    ),
  }}
  items={this.breadcrumbs}
>
  <div slot="divider">
    <VIcon>{mdiChevronRight}</VIcon>
  </div>
</VBreadcrumbs>