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:

Scoped slots allow you to pass properties from your child components into a scoped slot, and access them from the parent. Sort of like reverse property passing.

The first step to creating a scoped component slot is to pass properties into a default or named slot from your child component, like so:

ChildComponent.vue

<template>
  <div>
    <p>Look, there's a slot below me!</p>
    <slot :text="defaultSlotText"></slot>
    <slot name="literally-the-best" :text="namedSlotText"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultSlotText: "I'll get rendered inside the default slot.",
      namedSlotText: "I'll get rendered inside the *best* slot."
    }
  }
}
</script>

 

Then, to use those properties inside a parent component’s slot content, create a template element tied to the slot.

Add a scope attribute to the template element and set it to the name that you wish to access the scope properties from.

This essentially creates a local variable for anything inside that template, allowing you to access it as if it was in the parent’s scope.

(For example, scope=“myScope”, properties passed into the <slot> will be accessible as {{myScope.myProperty}} while scope=“yourScope” will be accessed as {{yourScope.myProperty}}.)

Note: The template element does not get added to the DOM. It’s simply a wrapper.

ParentComponent.vue

<template>
  <div>
    <child-component>
      <template scope="defaultSlotScope">
        <p>{{defaultSlotScope.text}}</p>
        <!-- Renders <p>I'll get rendered inside the default slot.</p> -->
      </template>
      <template slot="literally-the-best" scope="bestSlotScope">
        <p>{{bestSlotScope.text}}</p>
        <!-- Renders <p>I'll get rendered inside the *best* slot.</p> -->
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

 

If you’re using Vue 2.5 or above, use the slot-scope attribute instead of scope. Also you can skip the template elements.

ParentComponent.vue

<template>
  <div>
    <child-component>
      <p slot-scope="defaultSlotScope">
        {{defaultSlotScope.text}}
        <!-- Renders <p>I'll get rendered inside the default slot.</p> -->
      </p>
      <p slot="literally-the-best" slot-scope="bestSlotScope">
        {{bestSlotScope.text}}
         <!-- Renders <p>I'll get rendered inside the *best* slot.</p> -->
      </p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

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