vue.js 使用脚本设置访问HTMLAttribute

jucafojl 于 2023-10-23 发布在 Vue.js

关注(0)|答案(1)|浏览(160)

我有一个Input组件，我想继承所有默认的Input属性，这是我的脚本

<script setup lang="ts">
import { defineProps, InputHTMLAttributes } from "vue";

interface Props extends InputHTMLAttributes {
  label?: string;
}

defineProps<Props>();
</script>

我想知道我应该在我的标签中放什么来获得属性。这是我目前为止的模板：

<template>
  <div>
    <span v-show="label">{label}</span>
    <input {?????} />
  </div>
</template>

vue.js

来源：https://stackoverflow.com/questions/72749012/access-htmlattributes-using-script-setup

1条答案

按热度按时间

8ehkhllq1#

Vue.js版本>=3.3

您可以使用defineOptions宏禁用属性继承：

<script setup lang="ts">
import { InputHTMLAttributes } from "vue";

interface Props extends InputHTMLAttributes {
  label?: string;
}

defineProps<Props>();
defineOptions({ inheritAttrs: false })
</script>

版本< Vue3.3

添加另一个脚本标记，其中make inheritAttrs:false然后将$attrs绑定到输入标记：

<script setup lang="ts">
import { InputHTMLAttributes } from "vue";

interface Props extends InputHTMLAttributes {
  label?: string;
}

defineProps<Props>();
</script>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  inheritAttrs:false
})
<template>
  <div>
    <span v-show="label">{label}</span>
    <input v-bind="$attrs" />
  </div>
</template>
</script>

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js 使用脚本设置访问HTMLAttribute

1条答案

相关问题

热门标签

最新问答