千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

什么是属性透传

在Vue3中有一个很有意思的特性，透传属性。透传又分为自动透传绑定，和手动绑定两种。

什么是透传属性？ 透传属性指组件在使用的时候，作用在组件上的属性，会被向下流动，绑定到组件内的标签中。

什么是透传属性：

• 作用在组件上的属性（class，id，style，属性，事件）会被向下流动，作用组件的标签上。这些属性就是透传属性。
• 如果这个属性或事件，没有在组件中定义，那么它就是透传属性，反之则不是。

使用透传属性：

• 在模板中通过$attrs对象来使用透传属性，在代码中通过useAttrs()api来获取到透传对象，然后使用

透传分为自动透传和手动绑定两种：

• 自动透传：在只有一个根标签的组件中，作用在组件上的属性会默认自动透传绑定到该组件的根标签上。
• 手动绑定：在拥有多个根标签的组件中，是没有默认的自动透传绑定的，因为Vue不知道绑定给哪个根标签，需要我们手动去绑定。
• 手动绑定透传属性，是可以绑定任意的标签元素的，并且可以绑定给多个。

关闭自动透传：

• 我们可以在组件内通过 inheritAttrs: false来关闭组件默认自动绑定行为。

获取透传属性：

在模板中通过$attrs对象来使用透传属性，在代码中通过useAttrs()api来获取到透传对象，然后使用。通过透传对象可以获取透传过来的 class，style，id，事件和属性等。

透传属性和props：

传入一个属性或者是事件，如果这个属性、事件没有在组件中定义，那么它依然是透传属性，因为没有东西接受它。

如果是事先定义了defineEmits或defineProps来接受它，那么它就是props属性或自定义事件，不再是透传属性。

总之一句话:如果这个属性事件，没有再组件中定义，那么它就是透传属性，反之则不是。