Vue 2和Vue 3透传Attributes特性

本文主要是介绍Vue 2和Vue 3透传Attributes特性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

在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会自动绑定到<div>元素上  
};  
</script>

相比之下，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>

禁用自动透传后，开发者可以通过$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>

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>