vue3 useattrs

// 示例代码：使用 Vue 3 的 useAttrs 组合式 API

<template>
  <div>
    <child-component class="my-class" id="my-id" custom-attr="custom-value"></child-component>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  }
});
</script>

<script setup>
import { useAttrs } from 'vue';

// 使用 useAttrs 获取传递给组件的属性
const attrs = useAttrs();

console.log(attrs); // 输出: { class: "my-class", id: "my-id", customAttr: "custom-value" }
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <!-- 使用 $attrs 渲染未声明的属性 -->
    <div v-bind="$attrs">子组件内容</div>
  </div>
</template>

<script setup>
// 子组件不需要显式声明 props 来接收这些属性
</script>

解释说明：

1. 父组件：

   • 父组件通过 <child-component> 标签向子组件传递了一些属性，如 class、id 和 custom-attr。
   • 在父组件中，我们使用了 useAttrs 来获取传递给子组件的所有属性，并将其打印到控制台。

2. 子组件：

   • 子组件并没有显式声明这些属性作为 props。
   • 使用 $attrs 可以捕获所有未被声明为 props 的属性，并将它们应用到子组件的根元素上。

3. useAttrs：

   • useAttrs 是 Vue 3 提供的一个组合式 API，用于在 setup 函数中获取传递给组件的所有属性（不包括 props）。
   • 它返回一个响应式的对象，包含了所有未被声明为 props 的属性。