vue3 穿透attributes

Vue 3 中的穿透 attributes 是指在自定义组件的根元素上传递父组件中未被子组件所识别的属性。通过使用 `v-bind="$attrs"` 或者简写 `...$attrs`，我们可以将父组件中未被子组件所识别的 prop 传递给子组件的根元素。

这样做的好处是，子组件的根元素可以接收到父组件中的所有属性，并且可以在根元素上使用这些属性，而不需要在子组件中一个个定义相同的 prop。这样可以减少冗余代码，并且方便地将父组件的属性传递给子组件的根元素。

需要注意的是，如果子组件不需要接收某些属性，可以使用 `inheritAttrs: false` 来禁用属性继承，避免将这些属性传递给子组件的根元素。

请记住，以上是关于 Vue 3 中属性穿透的解释，可能与你在其他地方听到或看到的稍有不同。

相关问题

vue透传attributes

在Vue中，透传attributes是指将除了props和emits之外的其他attribute传递给子组件。通过使用$attrs对象来访问这些透传的属性。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [【Vue第十七章】透传 Attributes](https://blog.csdn.net/qq_39335404/article/details/128837950)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue——透传 Attributes](https://blog.csdn.net/weixin_45721753/article/details/130173018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue3 ts slot穿透

Vue3中的ts slot穿透是通过使用`useSlots()`这个API来实现的。首先，我们需要在父组件中定义插槽，并将插槽信息传递给子组件。在子组件中，我们使用`v-slot:[key]="{ record, rowIndex, column }"`来接收父组件传递的插槽信息，并将其透传给我们自己定义的插槽。具体的代码示例如下：

<template>
  <a-table row-key="id" :loading="loading" :pagination="pagination" :columns="(cloneColumns as TableColumnData[])" :data="tableData" :bordered="false" :size="size" @page-change="onPageChange">
    <!-- key 就是 slotName -->
    <template v-for="(item, key, i) in slots" :key="i" v-slot:[key]="{ record, rowIndex, column }">
      <slot :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"></slot>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { useSlots } from 'vue';

const slots = useSlots();
</script>

在上述代码中，我们使用`useSlots()`来获取父组件传递的插槽信息，并保存在`slots`变量中。然后，我们通过`v-for`指令遍历`slots`对象，并使用`v-slot:[key]`来接收父组件传递的插槽信息。最后，我们将插槽信息透传给我们自己定义的插槽。