Join Michael Sullivan for an in-depth discussion in this video Managing component content with slots, part of Learning Vue.js.
- [Instructor] In this video, we'll take a look…at another feature of components that makes them…flexible and extendable.…The basic idea is that you can include a slot element…in your component template, and then,…when using the component on a page,…the inner html, that is the markup between…the custom component tags,…will be inserted for the slot placeholder.…It seems simple enough, but there are a few…variations that are worth going over.…We're gonna continue where we left off…with our apod component, except that I've also…added a width and a height here to make this all…easier to see.…
And those might have been nice to add as props as well.…Let's modify this now so that the caption underneath…can be any markup we choose.…We can do that by replacing it with a slot.…Then, for example, above, in the first instance…of my component, I could modify the markup…by setting a child element,…and then write whatever I want.…
And now I can see that content appearing below the photo.…For the other instance of this component,…
- Adding Vue to a webpage
- Thinking declaratively with data binding
- Methods and event handling
- Adding dynamic style and class attributes
- Using CSS transitions and animations
- Using Vue components
- Vue CLI
Skill Level Intermediate
Web Programming Foundationswith Morten Rand-Hendriksen58m 44s Beginner
What you should know1m 29s
1. The Simplest Form
2. Essential Directives, Options, and Tools
3. Enhancing User Interfaces
4. Vue Components
Next steps2m 32s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.