This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Keep-Alive" Lesson
[00:00:00]
>> Sarah Drasner: Okay, let's use Keep-Alive. Keep-Alive is super, super exciting too. Because what we can do is we can wrap a component in Keep-Alive and make sure that it retains whatever state it was in as were switching out those components. So if we wanted to switch between different types of components or different structures.
[00:00:18] So we saw before that black and white ,those two components that we were switching dynamically. We can actually use a keep alive and retain whatever state it was in. I'll show you how I would work with that. If I have something like Frontend Masters here and I have a different font here, and we've got a flourish and a phone, and we reduce the image opacity.
[00:00:48] Then we can switch over to a white label I can say something else like you know, Tacos are good. And we can change the font, we can change the thing behind it. And if I switch between the black label and the white label then its retained the state of that you know component that we have selected.
[00:01:13] And you can actually see how the slots are working a bit to here because we got all of the same inner. That we're, that are gonna stay the same in each thing because we're putting it in with a slot, but we're able to kind of switch those out and retain whatever it was in before.