我有这个JLabel实例
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');
}
});
中，其中包含用户详细信息，例如电子邮件和密码，格式为JSON。
我有另一个组件注册为
const props它在标题中被调用。例如
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>
中查看电子邮件。 抱歉，我现在对Vuejs完全陌生