Vue组件通讯$attrs和$listeners例子
在Vue中，$attrs 和 $listeners 是两个非常有用的特性，它们允许你更轻松地实现组件间的通讯，特别是当你需要创建可复用的组件时。
$attrs 包含了父组件中未被子组件声明的属性 (class 和 style 除外)。当你不想在子组件中逐个声明父组件传递的属性时，你可以使用 v-bind="$attrs" 一次性地将它们传入子组件。
$listeners 包含了父组件中（不含 .native 修饰器的）v-on 事件监听器。子组件可以用 v-on="$listeners" 将事件监听器指向到内部元素上。
下面是一个使用 $attrs 和 $listeners 的例子：
父组件 (Parent.vue)
vue
<template>
<div>
<ChildComponent
:name="name"
:age="age"
@click="handleClick"
@custom-event="handleCustomEvent"
/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
name: 'John Doe',
age: 30
};
},
methods: {
handleClick() {
console.log('Clicked on the child component!');
},
handleCustomEvent(payload) {
console.log('Received custom event:', payload);
}
}
};
</script>
子组件 (ChildComponent.vue)
vue
<template>
<div>
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
<button @click="triggerCustomEvent">Trigger Custom Event</button>
<!-- 使用 $attrs 传递未声明的属性 -->
<input v-bind="$attrs" />
</div>
</template>
<script>
export default {
props: ['name', 'age'],
methods: {
triggerCustomEvent() {
// 触发自定义事件
this.$emit('custom-event', { message: 'Hello from Child' });
}
},
mounted() {
// 假设你需要在子组件内部监听一些事件
// 你也可以使用 $listeners 来监听
// 但在这个例子中，我们直接在模板上使用了 v-on
// 如果你想在子组件的某个内部元素上监听这些事件，你可以使用 v-on="$listeners"
}
};
</script>
在这个例子中，Parent.vue 传递了两个属性 name 和 age，以及两个事件监听器 @click 和 @custom-event 到 ChildComponent.vue。在 ChildComponent.vue 中，我们声明了 name 和 age 作为 props，并使用 v-bind="$attrs" 将未声明的属性绑定到 <input> 元素上。虽然我们没有在子组件中声明 click 事件监听器，但由于我们使用了 v-on="$listeners"（在这个例子中我们并没有显式使用它，但在需要时可以使用），子组件仍然可以响应父组件传递的点击事件。
注意，在Vue 3中，$attrs 和 $listeners 的行为有一些变化，但基本概念和用法是相似的。在Vue 3中，你可能需要使用 <slot v-bind="$attrs"> 而不是 v-bind="$attrs" 直接在子组件的根元素上，因为Vue 3鼓励使用插槽来分发内容。