$attrs和$listeners

Vue中，$attrs 和 $listeners 是用于父子组件间通信的特性。它们的作用如下：

1. **$attrs**[^1]: 这个属性允许子组件接收并处理来自父组件的所有未知属性。如果子组件没有显式地通过 `props` 接收这些属性，那么它们会被作为普通属性添加到子组件的 `$data` 中。这样，即使父组件传递了一些未预期的数据，子组件也能安全地处理。

2. **$listeners**: 子组件可以通过这个属性来接收从父组件传来的自定义事件。$listeners 是一个对象，它的键是事件名称，值是一个函数，当父组件触发指定的事件时，这个函数会被调用。这种方式使得子组件能够动态响应来自父组件的特定事件。

举个简单的例子：

// 父组件
<template>
  <child-component @customEvent="handleCustomEvent" someProp="parentValue"></child-component>
</template>

<script>
export default {
  methods: {
    handleCustomEvent(data) {
      console.log('Received custom event:', data);
    }
  }
};
</script>

// 子组件
<script>
export default {
  $attrs: {
    // 如果父组件传递了其他非prop属性，如'someOtherAttr'
    someOtherAttr: this.handleUnknownAttr
  },
  $listeners: {
    customEvent: (eventData) => {
      console.log('Received custom event:', eventData);
    }
  }
};
</script>

在这个例子中，子组件会接收到父组件传递的 `someProp` 作为 prop，以及 `someOtherAttr`（如果存在）。同时，它还会监听 `customEvent` 并在接收到该事件时执行相应的回调。