时间戳

首页 > 解决方案 > 如何在 Vue 中扩展原生 HTML 元素的属性类型？

typescript - 如何在 Vue 中扩展原生 HTML 元素的属性类型？

问题描述

假设我有一个元素，它包含一个输入并获取它的所有属性，此外还有一些属性。

在反应中，这将被输入为

interface ExtendedInputProps extends React.ComponentPropsWithoutRef<'input'> {
    some: Type
}

这是一个非常常见的用例。我知道 Vue 3 根据传递给props:defineComponent 中的对象的任何内容生成其 prop 类型。

我正在想象做类似的事情：

props:{
    ...getComponentProps('input')
    additionalProp: String
}

但我不知道该怎么做，也找不到任何文档。是否可以？

标签： typescriptvue.jsvuejs3

解决方案

最简单的情况是当 input 是组件的根元素时，你不需要声明任何额外的东西，只需将属性传递给你的组件，它们就会被向下传递

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

<script setup lang="ts">
defineEmits(["update:modelValue"])
const props = withDefaults(defineProps<{
    modelValue?: number
}>(), { modelValue: 0 })
</script>

可以这样使用：

<number-input v-model="data" type="text" placeholder="123-45-678" />

wheretype和placeholder最终将作为输入元素的属性。

如果您在组件中嵌套了输入，则需要禁用属性继承：

//NumberInput Component
<template>
  <div class="wrapper">
    <input :value="modelValue" v-bind="$attrs" 
      @input="$emit('update:modelValue', $event.target.value)"  />
  </div>

</template>

<script setup lang="ts">
defineEmits(["update:modelValue"])
const props = withDefaults(defineProps<{
    modelValue?: number
}>(), { modelValue: 0 })
</script>

<script lang="ts">
// normal `<script>`, executed in module scope (only once)
// declare additional options
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

请注意，我们添加了第二个脚本标记以禁用inheritAttrs并添加v-bind="$attrs"到输入以显式向下传递属性。有关该主题的更多信息，您可以在此处找到

推荐阅读