9. component slots

vueschool · Jun 17, 2021 · 1ca7b69 · 1ca7b69
1 parent 25ed792
commit 1ca7b69
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/slots/app.js b/slots/app.js
@@ -1,2 +1,12 @@
-const app = Vue.createApp({})
+const app = Vue.createApp({
+
+})
+.component('todo-item', {
+  template: '#todo-item-template',
+  data(){
+    return {
+      done: false
+    }
+  }
+})
 .mount('#app')
diff --git a/slots/index.html b/slots/index.html
@@ -11,7 +11,35 @@
 <body>
   <div id="app">
     <h1>Vue.js Slots Fundamentals</h1>
+    <todo-item>
+      Buy Bananas
+      <template #description>
+        <p>Bananas are good for your health</p>
+      </template>
+      <template #button-text>
+        Make it nice
+      </template>
+    </todo-item>
+    <todo-item>Eat Bananas</todo-item>
+    <todo-item>Celebrate!</todo-item>
   </div>
+
+  <script type="text/x-template" id="todo-item-template">
+    <div>
+      <input type="checkbox" v-model="done">
+      <span :class="{ done }">
+        <slot></slot>
+      </span>
+      <slot name="description"></slot>
+      <button><slot name="button-text">Highlight</slot></button>
+    </div>
+  </script>
+  <style>
+    .done{
+      color:green;
+      text-decoration: line-through;
+    }
+  </style>
   <script src="https://unpkg.com/vue@3"></script>
   <script src="app.js"></script>
 </body>