Javascript 添加错误以验证父组件中的错误包，并侦听子组件中的错误

我找不到一个指南来实现这一点。您将如何从父组件向错误包添加数据，并侦听子组件的特定错误以有条件地显示某些内容

我已将错误从父组件添加到错误包中，如下所示：

export default {
  mounted () {
    this.$validator.errors.add('critical', 'Unable to connect', 'network')
  }
}

<a class="navbar-item" v-if="!errors.has('critical')">Hello World</a>

现在，从

子组件

中，我想根据错误包有条件地显示一些东西，无论是否存在错误。我添加了我的子组件，如下所示：

export default {
  mounted () {
    this.$validator.errors.add('critical', 'Unable to connect', 'network')
  }
}

<a class="navbar-item" v-if="!errors.has('critical')">Hello World</a>

你好，世界

---

errors.has（'critical'）

返回

false

，因为VeeValidate为每个组件返回一个新实例。那么，如何将相同的错误包从父组件传输到子组件？

我没有VeeValidate的经验，但是，我想无论您使用什么，Vue方法都应该可以正常工作

不过，可能还有另一种方法可以使用您的库来实现这一点。无论如何，我会这样做：

第一步 从父组件的方法发出事件：

let payload = {
    message: 'Unable to connect', 
    type: 'network'
};
this.$emit('error', payload);

步骤2 在子组件或任何组件中：

let self = this;
$on('error', (payload) => {
   self.error = payload;
});

<div class="alert alert-danger" v-if="error.type == 'critical'" v-text="error.message"></div>

步骤3 现在，您可以从其他组件的模板端访问它：

let self = this;
$on('error', (payload) => {
   self.error = payload;
});

<div class="alert alert-danger" v-if="error.type == 'critical'" v-text="error.message"></div>

这只是一个例子。这是ES6，请随意翻译其他版本

---

您要查找的文档位于此处：

您可以与您的所有组件共享错误包。您只需将验证器注入到组件中 您可以在此处找到以下文档：

在这里，您可以查看一些用法示例：

---

目前，我正在使用VueX存储父组件中的VeeValidate对象。但是，您的解决方案看起来也不错。