如何在 vue3 的自定义输入字段中获取默认道具？

Question

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

<template>
  <input  type="text"> 
</template>

<script>
export default {
  name: "CustomInput",
}
</script>

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

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

Answer 1

默认情况下，组件的 根元素 自动 inherits attributes 应用于父元素，因此您正在寻找的行为已经发生。要使属性继承起作用，只能有一个根元素。即使是相邻的注释元素也会禁用继承。

<!-- 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>

当您不能依赖属性继承时（例如，存在多个根元素，或者目标嵌套在其他元素中），您可以 disable the attribute inheritance 加上 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>

另请注意，即使 <input> 是单个根元素，v-model 也不会自动用于组件。该组件必须显式实现 v-model 接口（即接收 modelValue 属性，并发出 update:modelValue 事件）：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  name: 'CustomInput',
  props: ['modelValue'],
}
</script>

demo

如何在 vue3 的自定义输入字段中获取默认道具？

How do I get default props in custom input field in vue3?

vue.js

vue-component

vuejs3