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

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

比如：

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

又比如：

<template>
  <BasicDrawer
    v-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.attrs
    console.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的位置：