Question

我有一个Vue.js项目，我在其中通过REST调用从后端获取了一堆值。这些变量之一告诉我用户是否已验证其电子邮件地址。这些值将加载到主页的mounted中。我想将布尔值verified传递给显示烤面包的组件，该组件会提醒用户验证其电子邮件（如果未验证）。我不想两次提交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>

如果我在每个页面上都添加了组件，那么使用主页上的道具会很容易。现在，我认为我应该考虑执行此操作的方式。是吗？

Answer 1

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

<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()），然后将结果存储在本地数据属性（{ {1}}。

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

1 个答案: