1. 什么是属性透传

是指组件在接收属性后，不做任何处理直接将这些属性传递给它的子组件。

2. 实现属性透传的方式

2.1 使用`v-bind="$attrs"`

<!-- 子组件 -->

<script setup lang="ts"></script>



<template>

  <span>黄</span>

  <span v-bind="$attrs">红</span>

</template>

<!-- 父组件 -->

<script setup lang="ts">

  import Demo from "@/components/Demo.vue";

</script>



<template>

  <div>

    <Demo class="red" />

  </div>

</template>

2.2 结合`inheritAttrs`选项

手动控制属性添加到哪个元素或者想避免属性添加到根元素。

export default {

  inheritAttrs: false,

  // 其他组件选项

};

<template>

  <div>

    <div id="inner-element" v-bind="$attrs"></div>

  </div>

</template>