vue3 属性透传
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>