Vue | 透传 Attrs

⭐️什么是透传 attrs？

• 大小写不敏感
• 维持响应式
  • prop
  • onUpdated()

成功传递给子组件（= 绑定到根元素），但子组件没有用 props 或 emits 声明的 attrs 或 v-on 事件监听器（eg. class/style/id）（反之，用 props/emits 声明过的属性和事件会被「消耗」，不再透传）

• 父组件使用组件: <Button class="large">，子组件不用 props 接收就能获取 class。所以这里的 class 是一个自动透传到子组件 root element 上的「透传 attrs」
• 父组件使用组件: <Button @click="onClick">，这里 click 会被添加到子组件的 root element 上

⭐️透传的继承

//App.vue
<template>
	<Button class="small"/>
</template>

//Button.vue
<template>
	<BaseButton />
</template>

Button 组件在根节点上渲染 BaseButton 组件。透传属性会传给 BaseButton

class：app. vue -> button. vue -> basebutton. vue

⭐️禁止透传继承

• 不想让 attrs 被 basebutton 的根节点继承

<script setup> 
	defineOptions({ inheritAttrs: false }) 
</script>

• 其它节点要使用透传 attrs，需配合 v-bind="$attrs"

⭐️API

useAttrs() ：配合 <script setup> 访问组件的所有透传 attrs