vue $attrs

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent v-bind="$attrs" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  inheritAttrs: false, // 防止属性被应用到根元素上
};
</script>

// 子组件 ChildComponent.vue
<template>
  <div>
    <p>Received attrs:</p>
    <pre>{{ $attrs }}</pre>
  </div>
</template>

<script>
export default {
  props: {
    // 这里可以定义一些明确的 prop，其他未定义的属性会通过 $attrs 传递
  }
};
</script>

解释说明

1. 父组件 (ParentComponent.vue):

   • 使用 v-bind="$attrs" 将所有未在父组件中显式定义为 props 的属性传递给子组件。
   • 设置 inheritAttrs: false 防止这些属性被应用到父组件的根元素上。

2. 子组件 (ChildComponent.vue):

   • $attrs 是一个对象，包含了所有从父组件传递过来但未在 props 中定义的属性。
   • 在模板中使用 <pre>{{ $attrs }}</pre> 可以直观地展示接收到的属性。