Vue 2和Vue 3透传Attributes特性

Vue 2和Vue 3在透传Attributes方面存在一些区别，这些区别主要体现在对Attributes的处理方式和灵活性上。

1. 在Vue 2中，当父组件向子组件传递Attributes时，这些Attributes会自动绑定到子组件的根元素上。这意味着，如果父组件为子组件提供了一个class或style等属性，这些属性将直接应用于子组件的根DOM元素。然而，Vue 2并没有提供太多的配置选项来精确控制这种透传行为。

默认透传

<!-- 父组件 -->  
<template>  
  <ChildComponent class="parent-class" data-custom="value" />  
</template>  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>  
 
<!-- 子组件 ChildComponent.vue -->  
<template>  
  <div>Child Component</div>  
</template>  
<script>  
export default {  
  // 不需要任何配置，class和data-custom会自动绑定到
元素上  
};  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2. 相比之下，Vue 3在透传Attributes方面提供了更多的灵活性和控制力。首先，Vue 3依然支持Attributes的自动透传，即父组件传递的Attributes会默认绑定到子组件的根元素上。但是，Vue 3增加了一个重要的选项：inheritAttrs。通过设置inheritAttrs: false，开发者可以禁用Attributes的自动透传，从而更精细地控制哪些Attributes应该被透传。

使用inheritAttrs: false禁用自动透传

<!-- 子组件 ChildComponent.vue -->  
<template>  
  <div>Child Component</div>  
</template>  
  
<script>  
export default {  
  inheritAttrs: false, // 禁用自动透传  
  // 你现在可以通过$attrs访问到这些透传的属性，并手动绑定它们  
};  
</script>
1
2
3
4
5
6
7
8
9
10
11

3. 禁用自动透传后，开发者可以通过$attrs对象在子组件内部手动访问和处理这些透传的Attributes。这使得开发者能够更灵活地决定哪些Attributes应该被应用到子组件的哪个元素上，或者是否需要进行额外的处理或转换。

手动处理$attrs

<!-- 子组件 ChildComponent.vue -->  
<template>  
  <div :class="$attrs.class">Child Component</div>  
</template>  
  
<script>  
export default {  
  inheritAttrs: false,  
  mounted() {  
    console.log(this.$attrs); // 输出透传的Attributes对象  
  }  
};  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

4. Vue 3的Composition API特性，提供了更强大的逻辑复用能力。在Composition API中，开发者可以通过setup函数和相关的响应式状态管理来更直接地处理Attributes。这使得透传Attributes的逻辑可以与组件的其他逻辑更紧密地集成在一起，提高了代码的可维护性和复用性。

通过Props传递Attributes

虽然$attrs主要用于处理未被识别为props的Attributes，但你也可以选择将某些Attributes作为props显式传递给子组件。

<!-- 父组件 -->  
<template>  
  <ChildComponent custom-prop="value" />  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>  
  
<!-- 子组件 ChildComponent.vue -->  
<template>  
  <div :class="customPropClass">Child Component</div>  
</template>  
<script>  
export default {  
  props: {  
    customProp: {  
      type: String,  
      default: ''  
    }  
  },  
  computed: {  
    customPropClass() {  
      // 根据props计算class  
      return this.customProp;  
    }  
  }  
};  
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35