Dynamic components. So, let's say you wanted to build a sample site in Vue. Something basic like Home, About, Contact. And each of those has a component that goes along with it. You could use dynamic components and basically switch out the components based on the page. So, they give you some starters code here. Here they're referencing components and they're doing it locally, but you could reference your components globally still if you'd like. And then it says V-bind is current view. So component changes when VM current view changes. So, current view is home, and these are our templates here for the components that we could go in and reference them. So we wanted to go and test out one of these things. We could set up the code here, I'm going to go and grab this and just replace it with our code here. References has apps still.
Data current view is home. Then these are the components and I'm going reference them the way we've done them here above. So this is going to become home as its value name, and then the other ones would be posted as a different value name. So I'm going to just keep them really simple. I'll just get rid of the slots and I'm going to just say each one home, and then I'll duplicate this one and call it posts.
And then we don't need to register these as they're global, the way we set them up. So current view is home then. Yeah. And then we can specify component V-bind is current view component changes when VM current view changes. So if we go up to our top here section and we say component V buying current view, now, if we refresh, it says home again, VM.currentview changes. So that's VM current view. If I wanted to write a button that changes the state, I can make a quick little button class here. So let's make some buttons. So btn.btn.btn-primary. Again, those are the bootstrap classes. Then I could say @click, and then what I want to do is I get called a method. Actually, let's do a method for this, and then I'm going to say change page, let's call it.
Then inside here, I would then specify the value that I want to change it to, and then I'm going to reference home here, and then I'll come back here and I'll say, this is reference to post. And this is then the value of post will make this lower case or capital case here. So now that's set up. Now I can go and say where it says change page. I can make a new message, ethics section. So we'll say methods: and then I'll set up my methods. So I'll say change page: function.
Then the function that I... What I wanted to do is going to have a property here which is the... We'll call this the page. Then I'm going to set the current view. So this .current view equal to the page value. Let's see if I did everything right there. We'll refresh the page. We don't see any console errors. We're on the homepage. We click on the post page and it says unknown element posts. Did you register it correctly? So I called it posts. So I need to go up here and call this posts. Now, if I refresh this and click on posts, doesn't seem to be switching out the components. So I must've made another error. So let's go and take a look. It's says @click"changePage. Let's go into our view and click on our root element and it says the current view is home.
So if I click on post, it changes the post and this changes the post, but it still says home here. Well, that's funny enough is because I didn't change the value here. So now if I click on post, it says post if you click on home and I have dynamically changing view components. So pretty cool, easy way to switch out your components based on what you need. Now, if you need something bigger than that, then this component system like that. You might want to try something like view X and that'll help you. It's a lot larger and a little bit more complex, but it's going to help extend some of that functionality that you need here. I'll go through miscellaneous here. So author and reasonable components, again, you can pass in props, events and slots. Child components can have this notion of Ref, which you can set up as Refs based on a parent element, you can set up a syncing components and advanced asyncing components.
Again, if you need to do something more complex component naming conventions, so a couple of different ways you might want to go and set those up and what else we have our recursive components. If you need to be like that circular reference between components, inline templates. So I think this is actually something that's kind of important. Your inline templates like this. So my component inline div P tags, and it makes the scope attempt. It's harder to reason about, so watch out for that X-Templates. There's another way to finding the templates inside. So if you define it as test our text X template, so script type, text X template ID, hello world, and then you can reference your code inside of. So let's go and set this up instead of the way we're specifying now. So again, we'll go into our script code here and you can either paste it into the script, add like a new script text box or put on new page.
If you want to do something like that. So text X templates, and then the ID, which is the reference of hello world example, instead of this code here, which was for the homepage, I'm going to replace it with this code here. So now I don't need to write it in the string syntax. Then I can specify the ID here for the template name based on the ID I want to give it. So I'm going to give it the id of home page. Let's do a home hyphen page that way in case they don't use the id of home again. And then I can specify this as home-page and then I can make another one of these and then specify this one as post-page. And then we'll just grab this value here and paste it here and change it to post-page. And now if you refresh, we should get the same thing.
It's changing the value, but maybe I mess something up in our code. Yes, forgot the $ sign that helps. We'll refresh this and now you'll see, I called it home again, same air as before this is post page and now post versus home. Now this is really helpful because if you have to write everything in one string, that can be really painful right now, you can come in here and you could write other things in here. So maybe I put a paragraph with some lorem in it, on the post page, and then you'll see that missing somewhere. I need to do a refresh post page. Doesn't see that value. Where is it? Oh, cause I'm outside of the alert, maybe. So a paste in that value. Yeah, there. And then you'll see that post page. Now I think there is something to note. This is if you keep the elements like that, it won't work because you need to have one parent element that holds everything.
So one direct child. So you can't have like a bunch of different elements. They need to have the parent or the highest, most element needs to contain or wrap around all the elements. So what I do normally for that is like a section tag. And then I'll paste the section tag, but you could use a div if you want. I prefer a section tag because I use divs a lot. Now notice the diff closes the alert and then the paragraphs here. Now, if I refresh, you'll see that the alert and the div, because I have one parent tag. So it cannot have multiple parent tags do note that when you make these tests, templates like this.
So those are those. Again, and if you're using something like Laravel or Laravel mix, you can of course, or view X, you can extend this further and set up these in different ways. Cheap static components here. You can go and say V1s if you need to go and structure that. Okay, that's it for components. Now, of course, there's a lot two components and definitely review the documentation. Sometimes it, you have to reread it like four or five times to get some of those concepts down. Again, go very slow. When you're working with components, make sure that you're naming things correctly and that the architecture of your system is well-designed.