vue3组件通信--useAttrs

107 阅读1分钟

useAttrs可以获取到组件身上的属性和事件。一般用于组件的二次封装。 其实useAttrsprops的功能几乎差不多。如果useAttrsprops同时接受父组件传递过来的属性,这种情况下,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>

image.png