Nebucatnetzer
/
vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lesson 110: add named slots

This commit is contained in:
Andreas Zweili 2021-02-06 17:38:58 +01:00
parent 69e590ea13
commit 2aead5518b
3 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
2021-02-06 cmp-adv-01-starting-setup/src/components/BadgeList.vue
View File

@ -1,15 +1,18 @@
<template>
<section>
<base-card>
<h2>Available Badges</h2>
<ul>
<li>
<base-badge type="admin" caption="ADMIN"></base-badge>
</li>
<li>
<base-badge type="author" caption="AUTHOR"></base-badge>
</li>
</ul>
<template v-slot:header> <h2>Available Badges</h2> </template>
<template v-slot:default>
<ul>
<li>
<base-badge type="admin" caption="ADMIN"></base-badge>
</li>
<li>
<base-badge type="author" caption="AUTHOR"></base-badge>
</li>
</ul>
</template>
</base-card>
</section>
</template>

7
2021-02-06 cmp-adv-01-starting-setup/src/components/BaseCard.vue
View File

@ -1,5 +1,10 @@
<template>
<div><slot></slot></div>
<div>
<header>
<slot name="header"></slot>
</header>
<slot></slot>
</div>
</template>
<script>

14
2021-02-06 cmp-adv-01-starting-setup/src/components/UserInfo.vue
View File

@ -1,9 +1,17 @@
<template>
<section>
<base-card>
<h3>{{ fullName }}</h3>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
<p>{{ infoText }}</p>
<template v-slot:header>
<h3>{{ fullName }}</h3>
<base-badge
:type="role"
:caption="role.toUpperCase()"
></base-badge>
</template>
<template v-slot:default>
<p>{{ infoText }}</p>
</template>
</base-card>
</section>
</template>