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的位置: