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

Question

我遇到了一个问题，无法找到解决方案想听听你对这个问题的看法。

我创建了可重用的Form和InputField组件。InputField组件获取验证道具，无论输入是否有效，该函数都会返回true或错误消息

// 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，那么submit函数应该不起作用。

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

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

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

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

谢谢大家！

Answer 1

我已经对您提供的代码进行了一些更改，您可以在这个代码沙箱中查看这些更改。我所做的是让您的InputFields发出类似于唯一id的东西，First Name的唯一id在我的示例中类似于firstname，以及它们的验证状态。该函数被称为checkValidation，发射被添加到@check-validation="checkValidation"的实现中。

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

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为真，否则为假。

现在，如果有任何东西没有经过验证，您可以做一些事情，比如将其作为道具传递给Form.vue和句柄。