在 Vue.js 组件中，$attrs 和 $listeners 这两个属性通常被用来解决父组件向子组件传递属性和事件时的问题。本文将详细介绍这两个属性的使用及注意事项，以及在实际项目中的应用。
$attrs 和 $listeners 的基础使用方法
在 Vue.js 中，我们经常使用 props 和 emit 来实现父组件向子组件传递数据和事件。但有时，我们需要在子组件中使用一些和组件有关的属性，如 class 和 style ，通常情况下，这些属性会被传递到子组件的最外层 DOM 元素上。
Vue.js 中的 $attrs 属性可以用来获取这些和组件有关的属性，并传递给子组件中的某一个元素。在子组件中，我们可以使用 v-bind 将这些属性绑定到需要应用的元素上，例如：
---- --- ---
----------
---------------- --------------- -------- --
-----------
---- --- ---
----------
---- ----------------
---- ---- ---
------
-----------在上面的例子中，$attrs 可以获取到父组件上的 class 和 id 属性，并通过 v-bind 绑定到了 div 元素上。
另外一个常见的问题是，当父组件向子组件传递事件时，如果事件需要原本的触发元素作为参数，那么就需要在子组件里手动维护、传递这个参数。例如：
---- --- ---
----------
---------------- -------------------- --
-----------
---- --- ---
----------
------- ------------- -- -------------- ------ ----- -------
---- ---- ---
---------
-----------在上面的例子中，子组件需要将原本的 event 参数和自定义的参数 arg1 和 arg2 一起传递给 $emit，然后父组件才能接收到所有参数。这个过程比较繁琐，而且容易出错。
Vue.js 中的 $listeners 属性可以将父组件上的事件监听器直接传递给子组件，从而避免了手动绑定事件和维护参数的繁琐过程。例如：
---- --- ---
----------
---------------- ----------------- --
-----------
---- --- ---
----------
------- ------------------------------ -------
---- ---- ---
---------
-----------在上面的例子中，$listeners 中包含了所有父组件上绑定的事件监听器，通过 v-on 直接绑定到了子组件上。在子组件中，我们只需要将 $listeners 对象绑定到需要监听事件的元素上，并传递参数即可。
注意事项
$attrs 和 $listeners 在使用时需要注意以下问题：
$attrs 和 $listeners 的特性
- $attrs 只包含父组件传递给子组件的非 prop 属性，例如 class、style、id 等。
- $listeners 只包含父组件绑定在子组件上的事件监听器。
$attrs和 $listeners 的传递
- $attrs 和 $listeners 只在子组件的最外层 DOM 元素上生效，不会传递到子组件内部的 DOM 元素。
- $attrs 和 $listeners 会覆盖已有的属性和事件监听器，因此在使用时需要注意可能会被覆盖的属性和事件。
$attrs 和 $listeners 的使用
- 在子组件中可以通过 $attrs 和 $listeners 获取到父组件传递的属性和事件监听器，但是不能修改它们的值。
- $attrs 和 $listeners 必须以 v-bind 的形式传递给具体的元素才能生效，例如
v-bind="$attrs"。
实践应用
$attrs 和 $listeners 在实际项目中有很多应用场景。其中一个常见的场景是：在自定义组件库开发中，我们可能需要将一些类似于 button、input 等基础组件进行二次封装，并在封装组件时，需要将一些原生属性和事件传递给内部的原生组件。
下面通过一个示例来展示如何使用 $attrs 和 $listeners 来实现一个 button 组件的二次封装。
---- --------- ------ -- ---
----------
---------- --------------- ---------------------
--
------------
-----------
---- --- ------ -- ---
----------
------- --------------- ------------------
-------------
---------
-----------在上面的例子中，封装的 button 组件将父组件传递过来的 class 和 click 事件分别绑定到了内部的 button 元素上。通过这种方式，我们可以将自定义组件和原生组件进行融合，实现自定义组件库的开发。
结论
$attrs 和 $listeners 是 Vue.js 组件开发中非常有用的属性，可以有效的解决组件通信时的一些问题。在使用时，我们需要注意它们的特性和注意事项，灵活运用即可。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67222fbd2e7021665e0ab44b