javascript - 访问VueJS中根组件的prop

Question

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

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

现在，我使用 Laravel 来获取 $tournament 值(value)。

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

我应该如何访问所有 child 的锦标赛值？？？

Answer 1

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

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

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

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