From 61dd86c91e6729281f390992525ebe7280a617b3 Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrelsouza@gmail.com>
Date: Tue, 17 Apr 2018 23:09:38 -0400
Subject: [PATCH] s9e122 multiple slots

---
 s9/src/App.vue              |  4 ++--
 s9/src/components/Quote.vue | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/s9/src/App.vue b/s9/src/App.vue
index 6fa37df..451c183 100644
--- a/s9/src/App.vue
+++ b/s9/src/App.vue
@@ -3,8 +3,8 @@
         <div class="row">
             <div class="col-xs-12">
                 <app-quote>
-                    <h2>{{quoteTitle}}</h2>
-                    <p>A Simple Quote</p>
+                    <h2 slot="title">{{quoteTitle}}</h2>
+                    <p slot="content">A Simple Quote</p>
                 </app-quote>
             </div>
         </div>
diff --git a/s9/src/components/Quote.vue b/s9/src/components/Quote.vue
index bb58403..fbe9734 100644
--- a/s9/src/components/Quote.vue
+++ b/s9/src/components/Quote.vue
@@ -1,6 +1,12 @@
 <template>
     <div>
-        <slot></slot>
+        <div class="title">
+            <slot name="title"></slot>
+        </div>
+        <hr>
+        <div>
+            <slot name="content"></slot>
+        </div>
     </div>
 </template>
 
@@ -21,4 +27,7 @@
     h2 {
         color: blue
     }
+    .title {
+        font-style: italic;
+    }
 </style>
\ No newline at end of file