深度解读Vue组件通信中的$attrs、$listeners以及inheritAttrs

2024-01-11 16:27:11

前言

在构建Vue应用程序时，组件通信是必不可少的一部分。组件通信是指组件之间的数据传递和交互，这使得我们能够构建出更复杂和可重用的应用程序。在Vue中，有几种不同的方式可以实现组件通信，其中attrs、listeners和inheritAttrs是三种最常用的方法。

$attrs

$attrs属性是一个对象，它包含了父组件传递给子组件的所有属性，除了那些被声明为props的属性。这使得子组件可以访问到父组件传递的所有其他数据，而无需显式地声明props。

例如，考虑以下父组件：

<template>
  <ChildComponent message="Hello World!" />
</template>

<script>
export default {
  components: {
    ChildComponent
  }
}
</script>

在这个例子中，父组件传递了一个名为"message"的属性给子组件。在子组件中，我们可以通过$attrs属性访问到这个属性：

<template>
  <p>{{ $attrs.message }}</p>
</template>

<script>
export default {
  props: {
    // 这里没有声明message prop
  }
}
</script>

这样，子组件就可以显示父组件传递的"Hello World!"消息。

$listeners

$listeners属性是一个对象，它包含了父组件传递给子组件的所有事件监听器。这使得子组件可以监听父组件发出的事件，并做出相应的响应。

例如，考虑以下父组件：

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

<script>
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Child component clicked!');
    }
  }
}
</script>

在这个例子中，父组件传递了一个名为"click"的事件监听器给子组件。在子组件中，我们可以通过$listeners属性访问到这个事件监听器：

<template>
  <button @click="$listeners.click">Click me!</button>
</template>

<script>
export default {
  props: {
    // 这里没有声明click prop
  }
}
</script>

这样，当子组件中的按钮被点击时，父组件的handleClick方法就会被调用。

inheritAttrs

inheritAttrs属性是一个布尔值，它决定了子组件是否应该继承父组件的所有属性。默认情况下，inheritAttrs为true，这意味着子组件将继承父组件的所有属性，包括那些被声明为props的属性。

例如，考虑以下父组件：

<template>
  <ChildComponent message="Hello World!" :number="123" />
</template>

<script>
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      number: 123
    }
  }
}
</script>

在这个例子中，父组件传递了两个属性给子组件，一个是"message"属性，另一个是"number"属性。默认情况下，子组件会继承这两个属性。

但是，如果我们把inheritAttrs属性设置为false，子组件就不会继承父组件的所有属性。例如，考虑以下子组件：

<template>
  <p>{{ $attrs.message }}</p>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>