inject metodo al posto di usare emits per propagare un evento

Cristiano Magro

2024-12-30 501f0d04371ebcdd9d9401d9e5b911b75f22ddef

 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>

@@ -32,30 +32,28 @@
      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.',
        },
      ],
  provide(){
    return {
      topics: this.topics,
      selectTopic: this.activateTopic,
    }
  },
  methods: {
    activateTopic(topicId) {
      this.activeTopic = this.topics.find((topic) => topic.id === topicId);
    },
  },
  mounted(){
    setTimeout(() => {
      this.topics.push({
          id: 'events',
          title: 'Events',
          description: 'Vieni all\'evento',
          fullText:
            'Gli eventi ti permettono di triggherare il codice on demand',
        });
    }, 3000);
  }
};
</script>