lesson 113: add a scoped slot

2021-02-06 cmp-adv-01-starting-setup/src/App.vue

@@ -7,6 +7,11 @@
             :info-text="activeUser.description"
             :role="activeUser.role"
         ></user-info>
+        <course-goals>
+            <template #default="slotProps">
+                <h2>{{ slotProps.item }}</h2>
+            </template>
+        </course-goals>
     </div>
 </template>
 
@@ -14,12 +19,14 @@
 import TheHeader from "./components/TheHeader.vue";
 import BadgeList from "./components/BadgeList.vue";
 import UserInfo from "./components/UserInfo.vue";
+import CourseGoals from "./components/CourseGoals.vue";
 
 export default {
     components: {
         TheHeader,
         BadgeList,
         UserInfo,
+        CourseGoals,
     },
     data() {
         return {

2021-02-06 cmp-adv-01-starting-setup/src/components/CourseGoals.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <ul v-for="goal in goals" :key="goal">
+            <slot :item="goal"></slot>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            goals: ["Finish the course", "Learn Vue"],
+        };
+    },
+};
+</script>
+
+<style></style>