Access the prop of the root component in VueJS

Question

In my page, I have a set of components and subcomponents like that:

<TournamentTabs :tournament="{{ json_encode($tournament) }}">    
   <TournamentTab>
      <TournamentTabGeneral></TournamentTabGeneral>
      <TournamentTabVenue></TournamentTabVenue>
      etc.
   </TournamentTab>
</TournamentTabs>

Right now, I use Laravel for getting $tournament value.

Now, I would like prop tournament to be available to all TournamentTabs children, but when accessing this.tournament , I get undefined

How should I access tournament value in all chidlren???

Answer 1

There are many ways to do it.

Firstly, the TournamentTabs is not a root component as I can see. Root component - it's the component where Vue instance mounts (in most cases div#app ) that can be accessible via this.$root anywhere.

You can access it via this.$parent.tournament , but this is not a best way to do it, because you will end up like this.$parent.$parent.$parent....tournament if you need to access property from deeply nested components.

You can try vuex library to implement the central application storage.