useAttrs

• 作用：获取组件的属性
• 使用：方便封装自定义组件
• 优先级：props>useAttrs，如果 props 接收了属性，useAttrs()就获取不到此属性

案例

• 父组件

<template>
    <div class="father">
        <h2>我是父组件</h2>
        <TestButton type="primary" size="small"></TestButton>
    </div>
</template>

<script lang="ts" setup>
import TestButton from './TestButton'
</script>

• 子组件 TestButton

<template>
    <div class="son">
        <!-- 基于v-bind绑定所有属性 -->
        <div :="$attrs">按钮</div>
        <!-- 单个绑定属性 -->
        <div :type="$attrs.type" :size="$attrs.size">按钮</div>
    </div>
</template>

<script lang="ts" setup>
import { useAttrs } from "vue";
let $attrs = useAttrs();
console.log($attrs)
</script>