如何在vue3中自定义输入字段中获得默认道具?

Question

我想让默认输入的自定义输入组件像这样。

<template>
<input  type="text"> 
</template>
<script>
export default {
name: "CustomInput",
}
</script>

我如何添加所有的道具，这是默认的自动没有定义。例如，如果我在上设置占位符CustomInput那么这个占位符自动应用于输入我不需要在组件CustomInput中写入占位符作为prop。

<CustomInput placeholder="test"/>
//it will be apply like 
<input placeholder="test"/>

Answer 1

默认情况下，组件的根元素会自动继承应用于父元素的属性，所以你正在寻找的行为已经发生了。要使属性继承起作用，只能有一个根元素。甚至相邻的注释元素也会禁用继承。

<!-- input inherits attributes -->
<template>
<input /> 
</template>
<!-- No attribute inheritance -->
<template>
<!-- my comment -->
<input />
</template>
<!-- No attribute inheritance -->
<template>
<label for="password">Password</label>
<input id="password" type="password" ​/>
​<p>Enter a unique password</p>
</template>

当你不能依赖属性继承时(例如，存在多个根元素，或者目标嵌套在其他元素中)，你可以使用inheritAttrs=false选项禁用属性继承，并在目标元素上使用v-bind="$attrs":

<template>
<div>
<label for="password">Password</label>
<input id="password" type="password" v-bind="$attrs" ​/>
​   <p>Enter a unique password</p>
</div>
</template>
<script>
export default {
inheritAttrs: false,
}
</script>

还要注意，v-model不会自动为组件工作，即使<input>是单个根元素。组件必须显式地实现v-model接口(即，接收modelValueprop，并发出update:modelValue事件):

<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
name: 'CustomInput',
props: ['modelValue'],
}
</script>

演示