理解$attrs/$listeners：Vue组件通信的神奇工具

2023-10-04 07:23:30

在Vue组件开发中，我们经常需要在不同组件之间进行通信，以传递数据和触发事件。attrs和listeners便是实现这一目标的两个重要工具。它们允许我们在组件之间传递属性和事件，从而实现组件的灵活性和可重用性。

深入了解attrs和listeners

$attrs：传递组件属性

$attrs是一个特殊的属性，它允许父组件将自己的属性传递给子组件。当父组件将属性传递给子组件时，子组件可以访问这些属性，并在自己的模板或脚本中使用它们。

例如，在父组件中，我们可以通过v-bind="$attrs"的方式将所有的属性传递给子组件：

<template>
  <ChildComponent v-bind="$attrs" />
</template>

在子组件中，我们可以通过this.$attrs访问父组件传递的属性：

export default {
  props: ['name'],
  data() {
    return {
      message: ''
    }
  },
  computed: {
    fullName() {
      return this.$attrs.name + ' ' + this.message
    }
  }
}

在上面的示例中，父组件将name属性传递给子组件。子组件通过this.$attrs.name访问这个属性，并在fullName计算属性中使用它。

$listeners：监听组件事件

$listeners是一个特殊的对象，它允许子组件监听父组件触发的事件。当父组件触发事件时，子组件可以捕获并处理这些事件。

例如，在父组件中，我们可以通过v-on="$listeners"的方式将所有的事件监听器传递给子组件：

<template>
  <ChildComponent v-on="$listeners" />
</template>

在子组件中，我们可以通过this.$listeners访问父组件传递的事件监听器：

export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  },
  mounted() {
    this.$listeners['click'] = this.handleClick
  }
}