useAttrs可以获取到组件身上的属性和事件。一般用于组件的二次封装。 其实useAttrs和props的功能几乎差不多。如果useAttrs和props同时接受父组件传递过来的属性,这种情况下,props拿到的属性useAttrs拿不到。
FatherComponent.vue组件:
<script setup>
import CustomButton from "@/components/CustomButton.vue"
const handler = () => {
alert("按钮被点击了")
}
</script>
<template>
<div class="ma-auto">
<!--这里相当于用父传子-->
<CustomButton @click="handler" color="primary" size="x-large" variant="tonal" title="按钮"/>
</div>
</template>
CustomButton.vue组件:
<script setup>
import { useAttrs} from "vue"
// 获取组件的属性和事件
const attrs = useAttrs()
console.log(attrs)
</script>
<template>
<div>
<v-btn :="attrs">按钮</v-btn>
</div>
</template>
上面代码中<v-btn :="attrs">按钮</v-btn>简写形式。
完整写法应该是:
<v-btn :color="attrs.color" :size="attrs.size" :variant="attrs.variant" :title="attrs.title">按钮</v-btn>