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鼓励使用插槽来分发内容。