inject metodo al posto di usare emits per propagare un evento

Cristiano Magro

2024-12-30 501f0d04371ebcdd9d9401d9e5b911b75f22ddef

inject metodo al posto di usare emits per propagare un evento

 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 @select-topic="activateTopic"></knowledge-base>
    <knowledge-base ></knowledge-base>
  </div>
</template>

@@ -34,7 +34,8 @@
  },
  provide(){
    return {
      topics: this.topics
      topics: this.topics,
      selectTopic: this.activateTopic,
    }
  },
  methods: {

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

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

<script>
export default {
 
  emits: ['select-topic'],
};
</script>

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

@@ -2,12 +2,13 @@
  <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'],
};

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

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