Vue.js Scoped Slots & Renderless Components

[@ramstein74]

The best explanation about scoped slots so far.... Thank you

[@drehimself]

Thanks for watching!

[@SinisterSlay1]

Very good explanation. But I am having trouble seeing a use case for this. Your get-json would be better served by a method or even a vuex action so you don't re-get the json every time any parent node updates. And you ended up duplicating your layout several times. Ultimately ending up with the more code then you started with. Scoped slots also means the parent must always have a layout, rather than just amending an existing layout. Is it possible to have a default layout, and a scoped slot to change the layout for those one off scenarios? I feel that would give a clear use case.

[@ortzinator]

Whatever goes inside the slot tag is the default.

[@SinisterSlay1]

Many years later, I figured out when to actually use this. When you're making a component that does nothing but fetch data of some kind from something. This let's you take your data layer out of your methods, your computeds, and Vuex (Pinia now) and use it in your template where you needed it anyways. With careful use of caching to prevent mounted events accidentally re-running your fetch calls, you can make a very template oriented data structure. So for example, you have a component that has user information in it. It has no display, using it just returns a user object. You can now place something like {{ userData.full_name }} and get nicely reusable code without having to duplicate methods and mounted and data props just to keep retrieving user data. Once I realized this use case, it revolutionized the reusability of my code. And you can still copy the data back to your methods by adding an @onload="localUserData = userData" to the component so whenever it loads, it copies the data.

[@Idagudominicidoko]

I have been trying to test a component that has a child component which uses scoped slots.. Is there a way to stub or mock the data I get from the child component in order to test it against a method called with it as a parameter ??

[@gknt7234]

When I want to use the component, I get an error : "TypeError: Cannot read property 'userId' of null", then it is rendered. {{ data.userId }}

[@gknt7234]

Instead of null data, I did this one so there is no error now. ... setup(props, vm) { const state = reactive({ data: () => [], loading: false }) ... }

[@RhyandMarketingGroup]

Love the work Andre! Question: Why use a scoped scope in the way you did with vs just making it an inline-template? I'm sure I'm missing a benefit to scoped slots, I just need help seeing it. Thanks! {{ message }} ---VS--- {{ message }}

[@amkamn1886]

HI can u explain this code please ? render() { return this.$scopedSlots.default({ response: this.response }) },

[@burnblue]

Why call the gamelist renderless if you just move the template to a render function? I thought renderless was when render = null. Maybe we could call this pass-through render or something. The start of the video implies that instead of making a separate component for grid vs vertical, the clean solution will be to move all the same markup to the parent. In the end we see that we do write new components to clean up, and the real lesson is separating data fetch (generic component) from layout (generic component) and using the parent to give those meaning. This is a valid lesson, I would have been excited to be led down that path (given a heads up) from the beginning, instead of wondering how putting all the markup in the parent is less messy. I'm being critical but this video just made something click for me so I do appreciate.

[@vikasni95]

Tquu soo much sir,, very very nice and clean explanation 👌😊

[@nemnoton]

Really interesting, great examples.

[@drehimself]

Thanks for watching!

[@christostsangaris4785]

Amazing content as always!

[@TrayHardPlay]

WAAAAIT, is it your were singing that funny song "And so you code...." like a developers remix on "Alors and danse"? PLEASE ANSWER

[@marcobraun4723]

Hey thanks, pretty nice explaintation :)

[@Martin-bm7ol]

wow,you are great! it is very useful

[@evans8245]

you sir, are a dirty slot ! arent ya XD

[@jordiortega7687]

Hi Andre! I would like to have a "renderlees + functional component". Is that possible? I have try some combinations to change the render function without success. Example of non functional render: render () { return this.$scopedSlots.default({ myItem: this.items }); }, Thanks!! btw --> best explanation ever!

[@elysium2013]

Cool!

[@drehimself]

Thanks for watching!

[@7kretzsche3]

have u ever heard about code indentation?

[@NoOorZ24]

I think this is a poorly chosen example. Writing all of HTML in parent component isn't really reusable. Way better solution would be to create 2 separate components and have them use the same JS file. That way HTML is separated and only 1 JS file is used. I get that you most likely just wanted to show how to use slots, but this felt like a bad example as you begun by talking about reusability and then created a component that only reuses JS, but HTML would have to be copy-pasted if same component is reused in more files