How to Use Dynamic Components in Vue // A 4 minute tutorial

[Music] hey view devs welcome back to learn view in today's quick video we're going to be talking about dynamic components in view and these are an extremely convenient way to make your code both more readable and more flexible they can simplify several conditional components ones using v if v else and v else if into just one line of code in short dynamic components allow you to toggle between different components in the easiest way possible by the end of this video we'll understand what dynamic components are recognize when to use them know how to implement them in view and hear about some advanced dynamic component topics but before we dive in make sure to scroll down and hit that like button and subscribe to the channel if you haven't it really helps out the video in the algorithm and helps get these tutorials in front of more view developers alright let's dive right in so first what are dynamic components dynamic components are well ways to dynamically switch between components at runtime while i know this is a pretty circular definition the name itself is pretty self-explanatory to better understand let's look at some example use cases navigating between tab components without having to route to a new page and if you want to learn more about that check out our tab component video in the description below we can also manage different types of pop-ups in just one component element and also displaying different content whether or not a user is logged in all of these typically would require unique components but instead of having to include them one by one dynamic components provides a shortcut there are several benefits to using dynamic components from the developer side it makes your code more reusable if all you have to do is use one element instead of adding several v-ifs everywhere it's much more scalable and readable from the user side using dynamic components can make a page more interactive and reduce page loads making for a faster user experience it's a win-win development is easier and the users benefit now that we know what dynamic components are and why they're useful let's learn how to actually implement them so using dynamic components is super simple we just need to know two things one the component element and two the v bind colon is attribute so first the component element in view the component element allows us to declare dynamic components is used just like any other element in our template and we can just go up to our template and declare it like this but the magic happens when we start using one of the component elements unique attributes and that's the v bind is attribute this is the attribute that actually allows dynamic components to work essentially it tells the component element what it is the v bind colon is or just colon is for shorthand points to a register component and we can pass it two different types of parameters the name of the component or the options object of a component so how do we use this simple first we have to include the components we want to use inside of our parent component and we can do this using import statements in our script and these are pretty dummy components here's a screenshot of one of them it's just a little template that prints out component a and then the other one just prints out component b and then make sure to include them in our export default next we can declare a variable that corresponds to the current rendering component and for ours we'll default to component a and it will look something like this finally let's just add our component element to our template and then just for this example i created two little buttons that switch between the two components so we have one button that when it's clicked changes our comp data to component a and then a second button that when it's clicked changes comp to component b and then we can just simply render component and then say colon is and then set it equal to our comp data so then if we look at this we'll see that whenever we click one of our buttons our component is actually rendering the proper label and we can also see this in our console when we inspect element the dynamic component switches and renders the proper component whenever we click alright so that's all for this quick video of course there's so much more you can do with dynamic components and i definitely recommend checking out our view tabs tutorial but some really cool ways that you can add on to this is add a transition element around your component or take advantage of you keep live components to help save states and there's links to both of these tutorials down below but even in just this simple use case view dynamic components can make your code much more maintainable and flexible i hope this video helped if you have any questions leave them in the comments below and as always like and subscribe for more view content see you in the next video and happy coding

Channel: LearnVue

Views: 2,466

Keywords: vuejs, web development, technology

Id: uC9_62BmKyE

Length: 4min 23sec (263 seconds)

Published: Tue Jun 29 2021