Dynamically Switching Components

[00:00:00]
>> So in terms of the next problem we wanna solve is that a lot of times when it comes to enterprise grade applications, we have this issue where we need to dynamically switch the component that is based on the data. So an example of this might be if you're looping through a feed of items, if it's like a news company, for example, some of them are gonna be actual articles, right?

[00:00:21]
There are a news article previews. But on the other hand, sometimes it needs to actually be, let's say, like an advertisement, or instead of a blog, it might just be like an image gallery. And so you can imagine that if the back-end is providing you a list of this basically type of content, you need to be able to swap out which component does what.

[00:00:39]
It's not as simple as looping through a single like news feed item, but then takes care of it. And so in those cases, there's actually a native component to view, like you don't need to import it or anything, which is the component, appropriately called. Because what it does is it has a special attribute, which is the is property and so when you v-bind it to is, it then takes basically a dynamic import of a component and will then swap it out.

[00:01:08]
So we take a look at this clock example, right? We have a digital clock, and we have an analog clock. But we wanna actually like basically swap it out based on the user preference. And so this is a simplified example, but important just to understand the concept here of component swapping.

[00:01:29]
So you can see here that clock type actually is a computed property that based on whether the selected clock is analog or not, will then go ahead and import the appropriate component name. So in this case, it would be analog. And then it goes ahead and swap that out.

[00:01:45]
And so the reason this is really powerful is because basically going forward, you can programmatically like switch out what you need. And it only imports whatever component is being actually like used inside of this component block. And so it's super powerful. It can accept props, asynchronous components, it can change into different components.

[00:02:08]
And actually, if you think about it, this is actually the very basis of how router-view is built. Because what it's doing if you think about it, right, we talked a little bit earlier about views, and the fact that there's still at the end of the day still single file components, router-view is just switching those views, right, based on the URL.

[00:02:24]
So the slash about, give me the about dot view page. And that's really the core fundamentals behind router-view. Granted it comes with a lot of other ergonomics, which makes it useful to have. So before you go running off building your own view router, just consider that a lot of work has gone into making like route handling a lot easier.

[00:02:43]
But in terms of the cons though of the component, which is important to understand with any strategy that you have, is that this now means that you have to be very careful with how you handle props. Because you can imagine, especially on something like a news feed item, the props that a news article would need might be very, very different and probably different than an ad requirement, for example.

[00:03:03]
And these components would have different sets of props. And so if you remember earlier when we covered inside our HTML section, this is where the v-bind shorthand is super, super like. This is like where it absolutely shines. Because now, if you were to try to be declarative on a component like on this dynamic component piece, you'd have a crazy list of props that you're trying to manage.

[00:03:28]
Like if it's digital, do this, if it's analog, do this. If it's digital, do this. And that would just be unwieldly. On the other hand, as we can see here, by v-binding the clock top inside of clock type, you can basically pro automatically change what props get actually bound to the element.

[00:03:46]
So this is definitely like one of the most perfect examples for that technique.