Vue useAttrs 作用

useAttrs 返回一个对象，其中包含所有 没有 被声明为 props 的属性（attributes）。

父组件

<script setup lang="ts">
import Demo from "./views/Demo.vue";
</script>

<template>
  <div>
  <Demo title="Tecent" href="https://qq.com" cats="sdfasff" />
  </div>
</template>

<style scoped>

</style>

子组件

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

defineOptions({
  name:"Demo"
})
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: "Title"
  },
  href: {
    type: String,
    required: true,
    default: "https://baidu.com",
  },
})
console.log(props)
const attrs = useAttrs()
console.log(attrs)
</script>

<template>
<div>

  <h1>{{props.title}}</h1>
  <p><a :href="props.href">Link</a></p>
</div>
</template>

<style scoped lang="less">

</style>

能看到，useAttrs 返回一个对象，其中包含所有 没有 被声明为 props 的属性（attributes）。