rewrite to provide topics in App.vue

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 :topics="topics" @select-topic="activateTopic"></knowledge-base>
+    <knowledge-base @select-topic="activateTopic"></knowledge-base>
   </div>
 </template>
 
@@ -12,31 +12,33 @@
 export default {
   data() {
     return {
-      topics: [
-        {
-          id: 'basics',
-          title: 'The Basics',
-          description: 'Core Vue basics you have to know',
-          fullText:
-            'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!',
-        },
-        {
-          id: 'components',
-          title: 'Components',
-          description:
-            'Components are a core concept for building Vue UIs and apps',
-          fullText:
-            'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.',
-        },
-      ],
-      activeTopic: null,
+      activeTopic: null
     };
   },
+  provide: {
+    topics: [
+      {
+        id: 'basics',
+        title: 'The Basics',
+        description: 'Core Vue basics you have to know',
+        fullText:
+          'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!'
+      },
+      {
+        id: 'components',
+        title: 'Components',
+        description:
+          'Components are a core concept for building Vue UIs and apps',
+        fullText:
+          'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.'
+      }
+    ]
+  },
   methods: {
     activateTopic(topicId) {
-      this.activeTopic = this.topics.find((topic) => topic.id === topicId);
-    },
-  },
+      this.activeTopic = this.topics.find(topic => topic.id === topicId);
+    }
+  }
 };
 </script>
 
@@ -97,4 +99,4 @@ button:active {
   background-color: #e24d8b;
   border-color: #e24d8b;
 }
-</style>
+</style>

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

@@ -1,13 +1,14 @@
 <template>
   <section>
     <h2>Select a Topic</h2>
-    <knowledge-grid :topics="topics" @select-topic="$emit('select-topic', $event)"></knowledge-grid>
+    <knowledge-grid
+      @select-topic="$emit('select-topic', $event)"
+    ></knowledge-grid>
   </section>
 </template>
 
 <script>
 export default {
-  props: ['topics'],
-  emits: ['select-topic'],
+  emits: ['select-topic']
 };
-</script>
+</script>

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

@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  props: ['topics'],
+  inject: ['topics'],
   emits: ['select-topic']
 };
-</script>
+</script>