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.

Riadh Rahmi

Senior Web Developer (Drupal & Laravel)

I am a senior web developer, I have experience in planning and developing large scale dynamic web applications especially in Drupal, Laravel.

Web Posts

Search

Page Facebook