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的位置：
)
)
