Javascript 在视图中加载变量，然后从组件Vue.js中使用它们

我有一个Vue.js项目，通过REST调用从后端获取一系列值。其中一个变量告诉我用户是否验证了他的电子邮件地址。这些值在主页的

挂载处加载。我想将布尔值
verified
传递给一个组件，该组件显示一个toast，提醒用户在未验证的情况下验证他的电子邮件。我不想提交两次REST调用（从主页和组件）。有没有办法将该值从页面传递到组件

我的应用程序有很多页面，因此我没有在所有页面上添加组件，而是将其添加到
App.vue
中，如下所示：

<template>
  <div id="app" class="app">
    <Navbar></Navbar>
    <b-container fluid class="app-body">
      <div class="main">
        <My-email-verification-component></My-email-verification-component>
        <router-view />
      </div>
    </b-container>
    <Footer />
  </div>
</template>



如果我将组件添加到每个页面，那么使用主页上的道具就很容易了。
现在我想我应该考虑我这样做的方式。这似乎是个坏习惯。是吗？
通过将数据绑定到
上的道具，将数据传递到视图中的当前组件：

这似乎是个坏习惯。是吗

意见：不，我认为留下来是个好习惯。然而，我个人更喜欢只使用组件来渲染某些东西。对于您的用例，我会将电子邮件验证移动到实用程序类中，将其导入
App.vue
，根据需要调用它（例如，
mounted（）
），并将结果存储在本地数据属性中（
isVerified
）.
我建议您阅读有关道具的官方Vue文档，并将道具传递给其他组件事件总线是另一种选择，尽管对于单个用例来说有些过分-
<my-email-verification v-model="verified" />
<router-view :verified="verified" />

// MyEmailVerification.vue
export default {
   props: ['value'],
   mounted() {
      const isVerified = /* ... */
      this.$emit('input', isVerified)
   }
}