Slot on Vuetify.js custom component-CodePudding

I have a component which renders a standard . I would like to use slots from my component, I would like to write something like:

<MyComponent>
    <header>
        Titolo
    </header>
    <body>
        my component body
    </body>
</MyComponent>

then final component should be:

<v-dialog>
    <h1>
        // header slot content
    </h1>
    // body slot content
</v-dialog>

how can I do this? This only works with <slot> but not with named slot.

CodePudding user response：

To use multiple slots you can use the following syntax:

<MyComponent>
  <template v-slot:header>
    Titolo
  </template>

  <template v-slot:body>
    <p>my component body</p>
  </template>
</MyComponent>

So you can pass some HTML in the template blocks and it will render in the component.

MyComponent.vue has the next content:

<template>
    <v-dialog>
        <h1>
            <slot name="header"></slot>
        </h1>
        <slot name="body"></slot>
    </v-dialog>
</template>

CodePudding user response：

You can define names for your slots in your custom component by using the name attribute available for the <slot> element, e.g. <slot name="header">. If you don't define a name for the slot, its name will just be default. See the Vue.js slots documentation here: https://vuejs.org/v2/guide/components-slots.html

Also, I made a simple usage example that you can check out here: https://codesandbox.io/s/unruffled-mopsa-f47hm?file=/src/App.vue

So in your case, your custom component could look something like this:

<v-dialog>
  <slot name="header" />
  <slot name="body" />
</v-dialog>

And to use it in the parent component, you could have:

<MyComponent>
  <template v-slot:header>
    Titolo
  </template>

  <template v-slot:body>
    <p>my component body</p>
  </template>
</MyComponent>