inject the function to activate a topic

2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/App.vue

@@ -4,7 +4,7 @@
       :topic-title="activeTopic && activeTopic.title"
       :text="activeTopic && activeTopic.fullText"
     ></active-element>
-    <knowledge-base @select-topic="activateTopic"></knowledge-base>
+    <knowledge-base></knowledge-base>
   </div>
 </template>
 
@@ -34,7 +34,8 @@ export default {
   },
   provide() {
     return {
-      topics: this.topics
+      topics: this.topics,
+      selectTopic: this.activateTopic
     };
   },
   methods: {

2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeBase.vue

@@ -1,9 +1,7 @@
 <template>
   <section>
     <h2>Select a Topic</h2>
-    <knowledge-grid
+    <knowledge-grid></knowledge-grid>
-      @select-topic="$emit('select-topic', $event)"
-    ></knowledge-grid>
   </section>
 </template>
 

2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeElement.vue

@@ -2,13 +2,14 @@
   <li>
     <h3>{{ topicName }}</h3>
     <p>{{ description }}</p>
-    <button @click="$emit('select-topic', id)">Learn More</button>
+    <button @click="selectTopic(id)">Learn More</button>
   </li>
 </template>
 
 <script>
 export default {
+  inject: ['selectTopic'],
   props: ['id', 'topicName', 'description'],
-  emits: ['select-topic'],
+  emits: ['select-topic']
 };
-</script>
+</script>

2021-02-03 cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeGrid.vue

@@ -6,14 +6,12 @@
       :id="topic.id"
       :topic-name="topic.title"
       :description="topic.description"
-      @select-topic="$emit('select-topic', $event)"
     ></knowledge-element>
   </ul>
 </template>
 
 <script>
 export default {
-  inject: ['topics'],
+  inject: ['topics']
-  emits: ['select-topic']
 };
 </script>