From the course: Vue.js 3 Essential Training

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Slots

Slots

- [Instructor] Slots are a special elements you can use within components that can make it easier to create templated content. In the parent component, you would place some content in between the custom component tag that you're creating and this would work just like in an HTML tag. You can add some text or some content inside the sort of beginning and ending versions of the tag. Then in the template itself, you would create a slot tag. And this content right here would replace this slot element. So this would render as some content. Now, if you do put something inside the slot itself like this default text, then this would render when you don't pass anything on the parent components. So if you pass this, then whatever you place in between the two slot tags would actually render. So let's take a look at an example. And you can see that in my template here, I have an alert and then I have a slot tag right here with some default…

Contents