Supported slot from Component's inside?

[rwu823]

In some nested components case, we don't want to pass slot from outside, cloud we defined in component first?

const Compo = {
  render(h) {
    return (
      <div slot="foo">

      </div> 
    )
  }
}

[nadimtuhin]

any update?

[ShuvoHabib]

{this.$slots.default}

[blade254353074]

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

[yyx990803]

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

[rwu823]

@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>
    )
  }
}

[nickmessing]

@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>
    )
  }
}

[Maxim-Mazurok]

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>