Vue3将必需的属性传递给孩子，如果它对父母来说是真的

Posted 2023-02-22

【中文标题】Vue3将必需的属性传递给孩子，如果它对父母来说是真的

【英文标题】：Vue3 passing required attribute to child if its true for the parent

【发布时间】：2022-01-11 15:49:37

【问题描述】：

我正在创建一个输入组件，我想根据父组件的布尔值传递一个必需的属性

#Parent component
<Input 
   :required="false"
/>

#Child component
<input 
     @input="event => $emit('update:value', event.target.value)"
     :required="required" 
/> 

问题是，当父组件的required为false时，它仍然会将required放入html中（浏览器根据需要读取）。

我怎样才能做到这一点？

谢谢 标记

【参考方案1】：

你应该解释更多。我提供了您在stackblitz 中描述的情况，我将其链接到here。它可以工作，它是一个简单的表单，当您更改App.vue 中的required 值时，您可以看到HelloWorld.vue 中的输入元素在检查器中发生变化。希望对你有用。

【讨论】：

嗨，Ghazai。感谢您的堆栈闪电战。这样做的问题是，如果required为false，则没有输入框。

对不起，我在上面测试其他东西，现在删除了额外的v-if。它现在正在工作。

你检查了吗？有用吗？

是的。如果您将其设置为 false 并检查输入的元素，您会看到它显示 ，这是正确的，但从浏览器验证的角度来看，它认为 required 已设置

这很奇怪，因为我正在检查 chrome 检查器中的元素，当值设置为 false 时它没有任何属性，因此它不检查所需的验证。您在使用什么浏览器？

【参考方案2】：

对于 VueJs 2 或更早的版本，您可以使用

<input :required="test ? true : false">

在 VueJs 3 中，您必须使用 null 来防止在 html 标签中呈现属性。

 <input :required="test ? true : null">

VueJS conditionally add an attribute for an element