From the course: Learning Vue.js

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using component slots

Using component slots - Vue.js Tutorial

From the course: Learning Vue.js

Start my 1-month free trial

Using component slots

- [Instructor] One way to make our components more flexible, is through the use of slots and slot content. Again, we'll use the read more component, for a simple example. We're already allowing the consumer of this component, to provide a URL through that prop. But, what if we wanted to allow someone to provide custom content for the link text? We could certainly use an additional prop, but, what if we want it to be even more flexible, and allow arbitrary HTML content there? That's where slots come in handy. So down in the read more template, if I just change this link text, to a slot element, with open and close tags, that becomes a placeholder for any content that's between the read more tags in the main template, meaning anything that's between, the open and closed tags there where the cursor is now. So I could put the read more text there, and the main template now, but, let's try something a little different, and…

Contents