This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Challenge 3: Solution" Lesson
[00:00:00]
>> Sarah: Okay let's go over the exercise. Did you feel like you could refactor in to a component fairly easily? Was that, pretty, pretty straight forward? Yeah, you can actually get going and actually abstract it away in to something that's more manageable pretty easily. So if we have our you know text, ex template here and I called mine ID place, you probably called yours something else.
[00:00:25] And then I wrapped it in a div and I have the image sources image and I have a slot where I'm replacing the content. You don't have to do yours that way if you don't want to and then I have this description here so in the component itself I have props that are coming down from the parent that are image, and description and a template of place and then here I'm using this location.
[00:00:54] I just decided to use a slot for this just to show how we could even take it a step further. But it's totally cool if you have everything for the place inside of the place, and then we're passing that information down from this parent to the child. And then we're able to have it update in all of these different components and then we can reuse those components as often as we need.
[00:01:19] And in this case, of course, we're using a v4 so we're not having to Rewrite every component every single time. We're just gonna go in a loop through all of these locations.