全方位详解 Vue 中的 $attrs 和 $listeners，轻松实现组件通信！

前端

2023-09-03 07:03:28

Vue.js 组件通信简介

在 Vue.js 中，组件之间的通信可以有多种方式，例如：

props/emit： 这是最常用的组件通信方式，允许子组件通过 props 接收父组件传递的数据，并通过 emit 触发事件通知父组件。
event bus： 事件总线是一种全局的事件发布/订阅机制，允许组件之间通过事件进行通信。
Vuex： Vuex 是一个状态管理库，允许组件通过共享状态进行通信。
provide/inject： provide/inject 允许父组件向其子组件提供数据，而子组件可以使用 inject 来访问这些数据。

attrs 和 listeners 的作用

attrs 和 listeners 是两个特殊的属性，可用于实现组件之间的通信。

**attrs：** attrs 包含了父组件传递给子组件的所有属性，但不包括 props。这允许子组件访问父组件传递的任何数据，而无需将其声明为 prop。
**listeners：** listeners 包含了子组件的所有事件监听器。这允许子组件监听父组件触发的任何事件。

如何使用 attrs 和 listeners

使用 $attrs

要使用 attrs，可以在子组件中通过 `this.attrs` 访问父组件传递的所有属性。例如：

<template>
  <div>
    <h1>{{ this.$attrs.title }}</h1>
    <p>{{ this.$attrs.content }}</p>
  </div>
</template>

export default {
  name: 'ChildComponent',
  props: {
    // ...
  },
  // ...
}

在父组件中，可以使用 v-bind 指令将数据传递给子组件。例如：

<template>
  <ChildComponent :title="title" :content="content" />
</template>

<script>
export default {
  name: 'ParentComponent',
  data() {
    return {
      title: 'Hello World',
      content: 'This is some content.'
    }
  }
  // ...
}
</script>

使用 $listeners

要使用 listeners，可以在子组件中通过 `this.listeners` 访问父组件触发的所有事件。例如：

<template>
  <div>
    <button @click="this.$listeners['click-me']">Click Me</button>
  </div>
</template>

export default {
  name: 'ChildComponent',
  props: {
    // ...
  },
  // ...
}

在父组件中，可以使用 v-on 指令将事件监听器添加到子组件。例如：

<template>
  <ChildComponent @click-me="handleClick" />
</template>

<script>
export default {
  name: 'ParentComponent',
  methods: {
    handleClick() {
      console.log('Click Me button clicked!')
    }
  }
  // ...
}
</script>