Question 28: Consider the following Vue component structure with nest…

1Vue.component('data-provider', {
2    template: `
3        <div class="provider">
4            <slot name="header" :user="currentUser" :loading="isLoading"></slot>
5            <slot name="content" :items="filteredItems" :count="itemCount"></slot>
6            <slot :fallback="defaultMessage" :error="errorState"></slot>
7        </div>
8    `,
9    data() {
10        return {
11            currentUser: { name: 'John', role: 'admin' },
12            isLoading: false,
13            filteredItems: ['item1', 'item2', 'item3'],
14            itemCount: 3,
15            defaultMessage: 'No data available',
16            errorState: null
17        }
18    }
19});
20
21Vue.component('parent-component', {
22    template: `
23        <data-provider>
24            <template v-slot:header="{ user, loading }">
25                <h1 v-if="!loading">Welcome {{ user.name }}</h1>
26                <span v-else>Loading...</span>
27            </template>
28            <template v-slot:content="slotProps">
29                <ul>
30                    <li v-for="item in slotProps.items" :key="item">
31                        {{ item }} ({{ slotProps.count }} total)
32                    </li>
33                </ul>
34            </template>
35
36
37            <template v-slot:default="defaultProps">
38                <p>{{ defaultProps.fallback }}</p>
39            </template>
40        </data-provider>
41    `
42});

1<div id="app">
2    <parent-component></parent-component>
3</div>