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

【问题标题】：Load variables in a view, then use them from a component Vue.js在视图中加载变量，然后从组件 Vue.js 中使用它们
【发布时间】：2019-03-04 16:42:36
【问题描述】：

我有一个 Vue.js 项目，我通过 REST 调用从后端获取一堆值。这些变量之一告诉我用户是否验证了他的电子邮件地址。这些值加载到主页的mounted。我想将布尔值 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>

如果我将组件添加到每个页面，那么使用主页中的道具会很容易。现在我认为我应该考虑我这样做的方式.. 似乎是一种不好的做法。是吗？

【问题讨论】：

我建议阅读有关 props 的官方 Vue 文档并将 props 传递给其他组件 vuejs.org/v2/guide/components-props.html
事件总线是另一种选择，尽管对于单个用例来说有点矫枉过正 - alligator.io/vuejs/global-event-bus

标签： javascript vue.js vuejs2

【解决方案1】：

technically possible 通过将数据绑定到 <router-view> 上的 props 将数据传递给当前视图中的组件：

<my-email-verification v-model="verified" />
<router-view :verified="verified" />

这要求电子邮件验证组件 support v-model 通过接受 value 属性并使用 input 事件发出新值：

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

似乎是一种不好的做法。是吗？

意见：不，我认为留下DRY 是个好习惯。但是，我个人更喜欢仅使用组件来渲染某些东西。对于您的用例，我会将电子邮件验证移动到实用程序类中，将其导入App.vue，根据需要调用它（例如，mounted()），并将结果存储在本地数据属性中（isVerified）。

【讨论】：