Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

Sometimes, it’s useful for slot content to have access to data only available in the child component. For example, imagine a <current-user> component with the following template:

<span>
  <slot>{{ user.lastName }}</slot>
</span>

We might want to replace this fallback content to display the user’s first name, instead of last, like this:

<current-user>
  {{ user.firstName }}
</current-user>

That won’t work, however, because only the <current-user> component has access to the user and the content we’re providing is rendered in the parent.

To make user available to the slot content in the parent, we can bind user as an attribute to the <slot> element:

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

Attributes bound to a <slot> element are called slot props. Now, in the parent scope, we can use v-slot with a value to define a name for the slot props we’ve been provided:

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

In this example, we’ve chosen to name the object containing all our slot props slotProps, but you can use any name you like.

Comments

Add new comment

Restricted HTML

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon