Vue3中v-bind=“$attrs“应用实例

应用情景：点击【设置列宽】，表格显示边框，再点击，隐藏边框，依此循环

实现应用效果的情况分析：

父组件传递 border

// 父组件
<script setup lang="ts" name="Reagent">
</script><template><ReagentTable :border="isBorder" />
</template>

情况1： 

子组件 defineProps border

孙组件 :border="props.border"

// 子组件
<script setup lang="ts" name="ReagentTable">
const props = defineProps<{border: boolean;
}>();
</script"><template>// 孙组件<el-table :border="props.border" ... />
</template>

情况2： 

子组件 defineProps border

孙组件 v-bind="$attrs" :border="props.border"

// 子组件
<script setup lang="ts" name="ReagentTable">
const props = defineProps<{border: boolean;
}>();
</script"><template>// 孙组件<el-table v-bind="$attrs" :border="props.border" ... />
</template>

情况3：

子组件没有 defineProps border

孙组件 v-bind="$attrs" :border="$attrs.border"

// 子组件
<script setup lang="ts" name="ReagentTable">
</script"><template>// 孙组件<el-table v-bind="$attrs" :border="$attrs.border" ... />
</template>

情况4： 

子组件没有 defineProps border

孙组件 v-bind="$attrs"

// 子组件
<script setup lang="ts" name="ReagentTable">
</script"><template>// 孙组件<el-table v-bind="$attrs" ... />
</template>

情况5： 

子组件没有 defineProps border

孙组件 :border="$attrs.border"

// 子组件
<script setup lang="ts" name="ReagentTable">
</script"><template>// 孙组件<el-table :border="$attrs.border" ... />
</template>

总结：

父组件	情况	子组件	孙组件 el-table 有 border	说明
传递 border	1	defineProps  border	:border="props.border"
	2		v-bind="$attrs" :border="props.border"	$attrs 中不包含 border
	3	/	v-bind="$attrs"  :border="$attrs.border"	$attrs 中包含 border 在 $attrs 中指定 border
	4		v-bind="$attrs"	$attrs 中包含 border，多层透传
	5		:border="$attrs.border"	在 $attrs 中指定 border

获取 $attrs 的内容

import { useAttrs } from "vue"; const attrs = useAttrs();
console.log("$attrs = ", attrs);

 输出打印

:border="$attrs.border"与直接使用 v-bind="$attrs" 的区别

方法	示例	优点	缺点
单个属性透传	:border="$attrs.border"	精确控制单个属性	需要为每个属性单独处理
批量透传	v-bind="$attrs"	自动传递所有属性	可能传递不需要的属性

推荐组合使用：

<el-table:border="$attrs.border" <!-- 明确处理的属性 -->v-bind="filteredAttrs" <!-- 传递其他属性 -->
>