访问VueJS中根组件的prop

Question

在我的页面中，我有一组这样的组件和子组件：

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

现在，我使用Laravel获得$锦标赛价值。

现在，我希望所有TournamentTabs孩子都可以使用道具锦标赛，但是当访问this.tournament时，我得到undefined

如何在所有chidlren中访问tournament值

Answer 1

有很多方法可以做到。

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

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

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