Vue组件中如何巧妙运用$attrs和$listeners实现组件封装？

本文共计1138个文字，预计阅读时间需要5分钟。

目录+前言+$attrs+例子：+$listeners（官方解释）+使用场景+总结+前言+多级组件嵌套需要传递数据时，通常使用Vuex。但仅限于传递数据，不做中间处理。使用Vuex处理，无需额外操作。

目录

• 前言
• $attrs
• 例子：
• $listeners (官网解释)
• 使用场景
• 总结

前言

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但仅仅是传递数据，不做中间处理，使用 vuex 处理，未免有些大材小用了。所以就有了 $attrs 、 $listeners两个属性 ，通常配合 inheritAttrs 一起使用。

$attrs

从父组件传给自定义子组件的属性，如果没有 prop 接收会自动设置到子组件内部的最外层标签上，如果是 class 和 style 的话，会合并最外层标签的 class 和 style。