useSlots()和useAttrs()是Vue 3中的新特性，它们通常用于自定义组件的开发过程中，可以帮助开发者进行插槽和属性的处理。

useSlots()用于获取父组件传递过来的插槽内容。

在使用useSlots()时需要将父组件传递过来的插槽名称作为参数传递给该函数，例如：

<template>
  <div>
    <slot name="header"></slot>
    <div>组件的主要内容</div>
    <slot name="footer"></slot>
  </div>
</template>

<script setup>
import { useSlots } from 'vue';
const headerSlot = useSlots('header');
const footerSlot = useSlots('footer');
</script>

在这个示例中，useSlots()函数会返回一个数组，该数组中包含了所有父组件传递过来的具有相同插槽名的节点。在使用useSlots()时，需要注意的是：只有在父组件里放置的物品才能被获取到。

useAttrs()用于获取传递给组件的所有属性。与useSlots()类似，useAttrs()函数也需要在<script setup>中进行引用，例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script setup>
import { useAttrs } from 'vue';
const { title, description } = useAttrs();
</script>

useAttrs()函数会返回一个对象，该对象包含了父组件传递给组件的所有属性。

使用useAttrs()时，需要注意的是：父组件传递的所有操作元素，包括className、style、onclick等操作元素都会被包含在内。

useSlots()和useAttrs()是Vue3 中非常实用的新工具，它们可以帮助开发者更方便地自定义组件，并简化组件的使用方式。