将数据传递到vue实例到vuejs rails的所有组件

我有这个 Vue 例如

document.addEventListener('DOMContentLoaded', () => {
  if(document.getElementById("app")){
    const node = document.getElementById('app');
    const props = JSON.parse(node.getAttribute('current_user'));

    const app = new Vue({
      el: '#app',
      router,
      template: '<App />',
      components: { App }
    }).$mount('#app');
  }
 });

数据在 const props 它包含用户的详细信息,比如电子邮件和密码,它是JSON格式的。

我有另一个组件注册为

import CurrentUser from "../components/shared/CurrentUser";
Vue.component("v-current-user", CurrentUser);

它在标题中被调用。例如

<template>
  <header class="app-header navbar">
    <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">
      <img class="navbar-brand-full" src="/images/evercam-logo-2.png" alt="Evercam Logo">
      <img class="navbar-brand-minimized" src="/images/Favicon-300.png" width="30" height="30" alt="Evercam Logo">
    </a>
    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <v-current-user />
  </header>
</template>

我想做的就是以这样一种方式传递这个道具,任何子组件都会收到它,就像我可以将它发送给其他组件一样 <v-current-user /> 可以得到我使用当前用户的组件中的值

<template>
  <ul class="nav navbar-nav ml-auto">
    <li class="nav-item dropdown">
      <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        <v-gravatar email="junaid@evercam.io" class="img-avatar" :size="40" />
      </a>
      <div class="dropdown-menu dropdown-menu-right">
        <a class="dropdown-item" href="/users/sign_out">
          <i class="fa fa-lock"></i> Logout
        </a>
      </div>
    </li>
  </ul>
</template>

在里面 <v-gravatar> 电子邮件。 抱歉问了这么多模棱两可的问题我现在是Vuejs的新手