You should already know what slots are--they allow us to put elements or components inside other components. With scoped slots, the component where the <slot> parts are declared can pass down data to the view that is being embedded in the slot.

For example, we could have this component with a default slot that has a list of results in the results property:

<template>
  <div class="search">
    <slot />
  </div>
</template>

<script>
export default {
  computed: {
    results () {
      return /* ... */
    },
  },
}
</script>

We could pass this property to the external view that includes parts of templates through the slot like this:

<slot :results="results" />

When using this component, you can retrieve the scoped data by wrapping your code with a template with a slot-scope attribute. All the scoped data will be available in this attribute object:

<Search>
  <template slot-scope="props">
    <div>{{props.results.length}} results</div>
  </template>
</Search>

This is how the components of the vue-googlemaps library that we will use shortly will give us back the data from Google Maps.

Scoped slots are very useful too when combined with a loop:

<slot v-for="r of results" :result="r" />

When using it, the content of the slot will be repeated and will pass down the current item:

<Search>
  <div slot-scope="props" class="result">{{props.result.label}}</div>
</Search>

In this example, if the results computed property returns three items, we will have three <div> displaying the result labels.