$attrs 和 $listeners 父子组件中分别怎么使用

$attrs 和 $listeners 是 Vue.js 中的两个特殊属性，在父子组件通信中起到了重要的作用。

$attrs 属性在子组件可以用来将父组件传递的非 prop 特性绑定到子组件的根元素上，这样在子组件中就可以直接使用这些特性了。例如，父组件的模板中有这样一段代码：

<my-component id="example" class="bg-red" data-name="example"></my-component>

而子组件中定义了一个 template ，在这个 template 中需要使用 id 、 class 和 data-name 这三个特性，那么就可以利用 $attrs 将这些特性传递下来，代码如下：

<template>
  <div v-bind="$attrs">
    ...
  </div>
</template>

这样，在子组件中就可以直接使用 id 、 class 和 data-name 这三个特性了。

$listeners 属性是在父组件中将子组件的事件绑定到父组件上。例如，在父组件的模板中有这样一段代码：

<my-component @click="handleClick"></my-component>

而子组件中有一个按钮，需要触发一个 click 事件。那么，在子组件中可以像下面这样写：

<button @click="$emit('click')">Click me</button>

这样，当子组件中按钮被点击时，$emit 方法就会触发 click 事件，并将该事件传递给父组件，由父组件中定义的 handleClick 方法处理。如果父组件还需要传递一些参数，可以在 $emit 方法中添加参数，例如：

<button @click="$emit('click', 'hello')">Click me</button>

这样，handleClick 方法就可以接收到一个参数 'hello'。

在父组件中，通过 $listeners 属性可以将子组件的事件绑定到父组件上，代码如下：

<template>
  <my-component v-on="$listeners"></my-component>
</template>

这样，在父组件中定义的 handleClick 方法就可以直接处理子组件中触发的 click 事件了。