inject object throw component

Cristiano Magro

2024-12-30 1dc4e45a24b81004daf0fb123cd092a850a17475

inject object throw component

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/.gitignore

@@ -20,3 +20,5 @@
*.njsproj
*.sln
*.sw?

package-lock.json

 08 - component communication/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>

@@ -32,6 +32,25 @@
      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);

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeBase.vue

@@ -1,13 +1,13 @@
<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'],
};
</script>

 08 - component communication/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>