CODEWITHSUNDEEP
vue.jsvuetify.js
benwasin97
benwasin97

Reputation: 263

Vue.js v-slot directive to replace slot directive

I am trying to mimic the default behavior of using the slot tag in a parent component. When I use <template v-slot> The content doesn't automatically go there. What is the correct way to do this without using the slot tag?, as I read that this will be depreciated. Thank you

Upvotes: 1

Views: 2012

Answers (1)

tony19
tony19

Reputation: 138196

Actually, it's the slot attribute that is deprecated (not the built-in <slot> component).

Before v2.6, the slot attribute was used to specify the name of the slot for the given content, and slot-scope received the slot props:

<base-layout>
  <template slot="header" slot-scope="{ subtitle }">
    <h1>Here might be a page title</h1>
    <h2>{{ subtitle }}</h2>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

From v2.6 forward, those two attributes are combined/replaced with the v-slot directive, where the slot name is given as an argument, and any slot props are received in the binding value:

<base-layout>
  <template v-slot:header="{ subtitle }">
    <h1>Here might be a page title</h1>
    <h2>{{ subtitle }}</h2>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

Upvotes: 3

Related Questions