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 - Vue.js Tutorial
From the course: Learning Vue.js
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.