Scoped Slots & Render Props

19/4/2020 Scoped Slots & Render Props - Advanced Components | Vue Mastery
Scoped Slots & Render Props

As you make your components more reusable across your application there are two patterns that can
help you make your components more flexible, maintainable, and less brittle: Scoped Slots and
Render Props. In this lesson we’ll be going over the use-case, and understanding both techniques.
Our Starting Code
<div id="app">
<products-list :products="products"></products-list>
</div>
<script src="vue.js"></script>
<script>
Vue.component('products-list', {
props: {
products: {
type: Array,
required: true
}
},
template: `
<ul>
<li v-for="product in products">
{{ product.name }}
</li>
</ul>
`
})
new Vue({
el: '#app',
data: {
products: [{
name: 'Magnifying Glass',
image: 'magnify.png'
}, {
name: 'Light Bulb',
image: 'bulb.png'
}]
}
})
</script>
https://www.vuemastery.com/courses/advanced-components/render-props-scoped-slots 1/9
As you might expect, this will display each product name:
Problem: Extending the Component

What happens when we want a products-list component that has the option to also show the
image? We might extend the code like so:
<div id="app">
<products-list :products="products" :show-image="true">
</products-list>
</div>
<script>
props: {
products: {
type: Array,
required: true
},
showImage: {
type: Boolean,
default: false
}
},
template: `
<ul>
<img v-show="showImage" :src="product.image" />
{{ product.name }}
</li>
</ul>
`
})
new Vue({ // ... Same as above ...})

</script>
Notice how we’re using a new prop called showImage , which if true shows the product image. This
would display:
The Problem with this Implementation

What happens when sometimes we need our products-list component to also sometimes
display price, sale price, add to cart buttons, different styles, or different bullets? What might result is a
very brittle component full of v-ifs and v-shows. There has to be a better way!
The First Solution: Scoped Slots

Scoped slots provide us with an alternative way to solve this problem. Speaking of the problem let’s
make it a little more difficult. How might we start with the original code above, and this time show the
products image AND uppercase the product’s name?
Here’s how we could solve it using scoped slots:
<div id="app">
<products-list :products="products">
<template slot="product" slot-scope="slotProps">
<img :src="slotProps.product.image" /> {{
slotProps.product.name.toUpperCase() }}
</template>
</products-list>
</div>
<script>
props: {
products: {
type: Array,
required: true
}
},
template: `
<ul>
<slot name="product" :product="product" >
{{ product.name }}
</slot>
</li>
</ul>`
})
new Vue({ ... Same as above ... })
</script>
First notice <slot name="product" :product="product" > , this is being created like a
normal slot, but it also has product as a slotProp . This slotProp can get accessed by the
parent if the parent wants to override what gets displayed by default in the slot, which in this case
is {{ product.name }} .
The parent can write out markup to get displayed inside the slot by writing <template
slot="product" slot-scope="slotProps"> . Inside the slotProps parameter the value is
first { "product": { "name": "Magnifying Glass", "image": "magnify.png" }
} and then it is { "product": { "name": "Light Bulb", "image": "bulb.png" } } ,
the two values inside the products array. As you might expect, this displays:
Destructuring
It’s worth noting at this point that we can use destructuring to make using slotProps a little more
readable. So instead of writing:
<template slot="product" slot-scope="slotProps">

<img :src="slotProps.product.image" /> {{
slotProps.product.name.toUpperCase() }}
</template>
We can simplify this to:
<template slot="product" slot-scope="{{ product }}">

<img :src="product.image" /> {{ product.name.toUpperCase() }}
</template>
and we get the same result.
Using Scoped Slots in the Wild

Scoped Slots can often be found in reusable component libraries like Damian Dulish’s Vue-multiselect
library. In the dropdown below we can customize the way the options are displayed by using slot-
scope in our parent:
As you can see, this sort of pattern can be used for all sorts of reusable functionality.
The Second Solution: Render Props

In order to use render props to solve this problem, we will need to convert our template in our example
code into a render function, like so:
<div id="app">
</div>
<script>
props: {
products: {
type: Array,
required: true
}
},
render(h) { // <-- Notice our render function
return h('ul', [
this.products.map(product =>
h('li', [product.name])
)
])
}
})
new Vue({ ... Same as above ... })
</script>
If you’re not familiar with render functions yet, I highly recommend you go watch lesson 4 of this
course where we explain template compilation.
To use Render props as a technique to solve our problem, we will be literally sending in a render
function as a prop into our component. See below:
<div id="app">
<products-list :products="products" :product-
renderer="imageRenderer"></products-list>
</div>
<script>
props: {
products: {
type: Array,
required: true
},
productRenderer: { // <-- Here's our new prop
type: Function,
default (h, product) { // <-- By default just print the
name
return product.name
}
}
},
render(h) {
return h('ul', [
this.products.map(product =>
h('li', [this.productRenderer(h, product)]) // use our
new prop
)
])
}
})
new Vue({
el: '#app',
data: {
products: [{
name: 'Magnifying Glass',
image: 'magnify.png'
}, {
name: 'Light Bulb',

image: 'bulb.png'
}],
imageRenderer(h, product) { // <-- The imageRenderer I'm
passing in
return [
h('img', {
attrs: {
src: product.image
}
}),
' ',
product.name.toUpperCase()
]
}
}
})
</script>
Notice my comments above, and then notice how I call the component: <products-list
:products="products" :product-renderer="imageRenderer"></products-list> .
Here I’m passing in the imageRenderer that I declare in the root element.
If I wanted to clean this up a little I could use the JSX babel plugin, which would allow me to write JSX
inside of my render functions. It’ll feel much more React like, if that’s something you enjoy. 😉
Using Render Props in the Wild

Just like with Scoped Slots we can find component libraries that use this pattern, like the Vue-
Auosuggest library from Darren Jennings. There are times when we might want to customize the drop-
down list of autosuggestions, like you see below, with the picture next to the suggestion.
If we look inside the readme, we find that we can pass in a renderSuggestion method to this
component library to specify the way your suggestions are displayed. It even shows you the JSX
syntax:
Let’s ReVue
If you’ve never seen either of these patterns before, you might be wondering why you wouldn’t always
use Scoped Slots. In my opinion (and Evan You’s) Scoped Slots is definitely the more Vue friendly
solution. However, I’m sure there are some cases where you may need the extra power of Render
Props, or if you’re using JSX with render functions.
Both Scoped Slots and Render Props allow the parent component to control how the child’s data is
displayed, which can help you create reusable and maintainable components.
Next Lesson
On our next lesson we’ll be talking with Evan You, the creator of Vue.js, about advanced Vue.js
components.

Scoped Slots & Render Props - Advanced Components - Vue Mastery

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Scoped Slots & Render Props - Advanced Components - Vue Mastery

Uploaded by

Copyright:

Available Formats

19/4/2020 Scoped Slots & Render Props - Advanced Components | Vue Mastery

Our Starting Code

As you might expect, this will display each product name:

Problem: Extending the Component

new Vue({ // ... Same as above ...})

The Problem with this Implementation

The First Solution: Scoped Slots

Here’s how we could solve it using scoped slots:

<template slot="product" slot-scope="slotProps">

We can simplify this to:

<template slot="product" slot-scope="{{ product }}">

and we get the same result.

Using Scoped Slots in the Wild

The Second Solution: Render Props

name: 'Light Bulb',

Using Render Props in the Wild

You might also like