$attrs / $listeners怎样使用

在Vue组件中，你可以通过以下方式来使用$attrs和$listeners属性：

1. 使用$attrs：
- 在子组件中，使用`$attrs`对象来获取父组件传递的所有属性。例如，如果父组件传递了一个名为`color`的属性给子组件，你可以在子组件中使用`$attrs.color`来访问该属性的值。

2. 使用$listeners：
- 在子组件中，使用`$listeners`对象来绑定父组件传递的事件监听器。例如，如果父组件传递了一个名为`click`的事件监听器给子组件，你可以在子组件中使用`$listeners.click`来绑定该事件。

下面是一个示例，演示了如何使用$attrs和$listeners：

<template>
  <div>
    <p>父组件属性传递给子组件的color属性值：{{ $attrs.color }}</p>
    <button v-on="$listeners">点击触发父组件传递的事件</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  mounted() {
    console.log(this.$attrs); // 输出父组件传递的所有属性
    console.log(this.$listeners); // 输出父组件传递的所有事件监听器
  },
};
</script>

在上面的示例中，子组件通过`$attrs.color`获取了父组件传递的color属性的值，并通过`$listeners`绑定了所有父组件传递的事件监听器。