在VueJS中访问根组件的prop

Question

在我的页面中，我有一组类似的组件和子组件：

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

现在，我使用Laravel获得$ tournament值。

现在，我希望所有TournamentTabs儿童都可以使用道具锦标赛，但是访问this.tournament ，我undefined

我应该如何在所有儿童中获得tournament价值？？？

Answer 1

有很多方法可以做到这一点。

首先，正如我所看到的，TournamentTabs不是根本组件。 根组件-它是Vue实例挂载的组件（在大多数情况下为div#app ），可以通过this.$root在任何地方进行访问。

您可以通过this.$parent.tournament来访问它，但这不是最好的方法，因为如果需要访问属性，最终将像this.$parent.$parent.$parent....tournament一样this.$parent.$parent.$parent....tournament来自深层嵌套的组件。

您可以尝试使用vuex库来实现中央应用程序存储。