$attrs 和 $listeners

$attrs 和 $listeners 是 Vue.js 中的特殊属性。

$attrs 是一个包含了父组件传递给子组件的非特定 prop 的对象。这些 prop 会被添加到子组件的根元素上。

$listeners 是一个包含了父组件传递给子组件的所有事件监听器的对象。这些事件监听器可以通过在子组件的根元素上绑定它们来自动将其传递给子组件的某个内部元素。

通过使用 $attrs 和 $listeners，你可以将父组件中的属性和事件传递给子组件，而不需要在子组件中显式声明它们。这在开发可复用的组件时非常有用，因为它允许父组件决定要传递给子组件的属性和事件，而不需要在子组件中硬编码这些内容。

相关问题

$attrs和$listeners如何使用

在Vue.js中，$attrs和$listeners是两个常用的属性，它们的作用如下：

1. $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。可以在组件中使用 $attrs 来访问这些特性，从而实现组件的透传特性。

2. $listeners：包含了父作用域中 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件，从而实现组件的透传事件。

举个例子，假设有一个父组件 Parent.vue 和一个子组件 Child.vue，Parent.vue模板代码如下：

<template>
  <Child
    :name="name"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  props: {
    name: String
  }
}
</script>

在这个例子中，我们通过 v-bind="$attrs" 将父组件中的所有非 props 特性（例如 id、class、style等）透传给子组件。同时，通过 v-on="$listeners" 将父组件中除了 .native 修饰器以外的所有事件监听器透传给子组件，这样就可以在子组件中使用这些事件了。

在子组件 Child.vue 中，我们可以这样使用 $attrs 和 $listeners：

<template>
  <div>
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
      v-bind="$attrs"
      v-on="$listeners"
    />
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    value: String
  }
}
</script>

在这个例子中，我们通过 v-bind="$attrs" 将父组件中的非 props 特性（例如 id、class、style等）绑定到子组件的 input 元素上，通过 v-on="$listeners" 将父组件中的事件监听器绑定到子组件的 input 元素上，这样就实现了组件的透传特性和透传事件。

$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 事件了。