Open code, practice, and notes →
Download source with English comments · for reading
Vue · 11 Composing Screens with Slots
Series contents · Technology map
Stage: Component Contracts and Watching · Editable example · Storage ID: vue-step-11
Goals and learning outcomes
- The two panels' footers display different content.
- The number of filtered results stays the same after changing slots.
Prerequisites
Unit 11 builds on the work and experiment records from Unit 10.
Key concepts and explanations
Slots
Slots place parent-provided content inside a child's layout. Template expressions written by the parent use the parent's scope.
Scoped slots
Pass child data through slot props when the parent needs to render it. Separate data ownership from presentation responsibility for reuse.
Practice setup
First check the execution scope guidance on the example screen. The following is the preparation environment for extending the assignment in a separate project. Use .vue SFCs and script setup in a separate Vue Vite project. Record package versions and the lockfile, and run on the development server. The built-in Vue examples use the h function and are not a general-purpose SFC compiler.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Create header, default, and footer slots in src/Panel.vue.
- Supply different headers and footers to the list and note panels.
- Use CardList's item slot so the parent renders the title and completion badge.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| item slot | Default title | Title and badge | List calculations stay the same while only the row presentation changes. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- The two panels' footers display different content.
- The number of filtered results stays the same after changing slots.
Self-check
- Can a parent slot access a child's local variables directly?
- How do you choose between props and slots?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
This is an experiment with actual Vue reactivity and render functions. Check SFC templates in an external compilation environment.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Component v-model · Next: watch Sources and Timing