vue3 v-bind=“$attrs“ 的一些理解，透传 Attributes相关说明及事例说明

1、可能小伙伴们经常会在自己的项目中看到v-bind="$attrs"，这个一般是在自定义组件中看到。

比如：

<template><BasicModalv-bind="$attrs"@register="registerModal":title="getTitle"@ok="handleSubmit":can-fullscreen="false"><BasicForm @register="registerForm" /></BasicModal>
</template>

又比如：

<template><BasicDrawerv-bind="$attrs"@register="register"showFooter:title="getTitle"width="50%"@ok="handleSubmit"><BasicForm @register="registerForm" /></BasicDrawer>
</template>

那么这个v-bind="$attrs"究竟是干嘛用的，为什么要写上这一段呢？

2、理解v-bind="$attrs"

Attributes 继承

• “透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。
• 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 <MyButton> 组件，它的模板长这样：

禁用 Attributes 继承

• 如果你不想要一个组件自动地继承 attribute，你可以在组件选项中设置 inheritAttrs: false。
• 最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。通过设置 inheritAttrs 选项为 false，你可以完全控制透传进来的 attribute 被如何使用。
• 这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到。
• 这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

3、访问透传 Attributes

如果需要，你可以在 <script setup> 中使用 useAttrs() API 来访问一个组件的所有透传 attribute：

<script setup>
import { useAttrs } from 'vue'const attrs = useAttrs()
</script>

如果没有使用 <script setup>，attrs 会作为 setup() 上下文对象的一个属性暴露：

export default {setup(props, ctx) {// 透传 attribute 被暴露为 ctx.attrsconsole.log(ctx.attrs)}
}

官方地址：https://cn.vuejs.org/guide/components/attrs.html

4、案例

TransAttrsTest.vue代码：

<template><div><h1>TransAttrsTest</h1><hr/><TransAttrsTestA class="red" @click="showInfoRoot" style="cursor: pointer"/></div>
</template>
<script setup lang="ts">
import TransAttrsTestA from "./TransAttrsTestA.vue";
const showInfoRoot = () => {console.log("TransAttrsTest");
};
</script>
<style scoped>
.red {color: red;
}
</style>

TransAttrsTestA.vue代码：

<template><div><div class="bg" @click="showInfo">TransAttrsTestA</div><hr /><TransAttrsTestB class="bg" @click="showInfo" v-bind="$attrs"/><span>Fallthrough attribute: {{ $attrs }} <br/> {{ $attrs.style?.cursor }}</span></div>
</template>
<script setup lang="ts">
import { useAttrs } from "vue";
import TransAttrsTestB from "./TransAttrsTestB.vue";
const attrs = useAttrs();
// from vue3.3
defineOptions({inheritAttrs: false, //true:public false:private
});
const showInfo = () => {console.log("TransAttrsTestA");console.log("attrs", attrs.style?.cursor);// console.log("attrs", $attrs)
};
</script>
<style scoped>
.bg {background-color: #f2f2f2;
}
</style>

TransAttrsTestB.vue代码：

<template><div><div class="blue" @click="showInfo">TransAttrsTestB</div></div>
</template>
<script setup lang="ts">
const showInfo = () => {console.log("TransAttrsTestB");
};
</script>
<style scoped>
.blue {color: blue;
}
</style>

App.vue

5、总结说明：

• vue3.3开始可以使用，在这之前默认false

defineOptions({inheritAttrs: false, //true:public false:private});

• 详细说明

inheritAttrs: true：类似public  引用的组件上的class，style，@click都会在组件中起作用，可透传。

inheritAttrs: false:  类似private， 如果是false，引用的组件上的class，style，@click都会在组件中不会起作用。不可以透传。

但可以通过以下二种方式获取到：

1）template中$attrs中获取到。

<span>Fallthrough attribute: {{ $attrs }} <br/> {{ $attrs.style?.cursor }}</span>

2）script中我们使用useAttrs()来访问到

const attrs = useAttrs(); console.log("attrs", attrs.style?.cursor);

最后，通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实是否可以透传以及透传到哪里。

分别作用在1，与作用在2位置上的输出：

1的位置：

2的位置：