如何在插槽Vue中获取子组件状态

Question

我有一个问题我想不出解决办法 ???? 想听听您对这个问题的看法。

我创建了可重用的 Form 和 InputField 组件。 InputField 组件获取validation prop，一个函数，无论输入是否有效，都会返回真或错误信息

// InputField.vue
const validate = () => {
  isValid.value = props.validation(inputValue.value);
};

// App.vue
<InputField
  v-model="formData.firstName"
  element="input"
  required
  name="First Name"
  :validation="(val) => /^.{2,}$/.test(val) || 'Minimum 2 characters'"
/>

现在在Form.vue中，我有一个叫isValid的变量，如果为false，提交函数应该不起作用。

所以问题是：我如何检查表单组件中所有 InputFields 的状态（它作为插槽接收它们）以了解输入是否 isValid = true，（然后检查它们是否都为真，这很简单）

现在我正在寻找一种有效的方法来做到这一点，并确保它适用于多个表单和输入，如果我将它放在应用程序的不同位置，我不是在寻找快速破解

这是应用程序的链接：https://codesandbox.io/s/muddy-sun-0ti9m 你可以看一下就明白我在说什么了:)

我将回顾一下： 主要目标是通过传递给它们的验证函数检查所有输入是否有效，如果表单无效，它将无法提交。

谢谢大家！

Answer 1

我对您提供的代码进行了一些更改，您可以在此codesandbox 中查看更改。我所做的是让您的InputFields 发出类似于唯一ID 的东西，First Names 唯一ID 在我的示例中类似于firstname，以及它们的验证状态。该函数称为checkValidation，并且使用@check-validation="checkValidation" 将emit 添加到它们的实现中。

有一个新对象，它处理多个验证状态。如果您想让此尝试通用，您可以在将来动态创建它。对象是：

const formValidationObject = reactive({
   firstname: false,
   lastname: false
});

checkValidation 看起来像这样：

const checkValidation = (object) => {
   formValidationObject[object.data.id] = object.data.valid === true;
};

这很简单。与发射一起传递的object 包含id，如“名字”，以及验证状态。如果object.data.valid 为真，则formValidationObject 及其密钥将为真，否则为假。

现在你可以做一些事情，比如把它作为一个 prop 传递给你的 Form.vue 并处理，如果有任何事情没有得到验证。