vue中$attrs/$listeners适⽤于隔代组件通信的原理和例子

在Vue中，$attrs 和 $listeners 是两个特别有用的特性，它们允许我们更轻松地实现组件间的通信，尤其是当涉及隔代组件通信时。下面我将详细解释它们的原理并提供一个例子。

原理

$attrs：

$attrs 包含了父作用域中不作为 prop 被识别（且获取）的特性绑定（class 和 style 除外）。

当一个组件没有声明任何 prop 时，$attrs 会包含所有父作用域的绑定（class 和 style 除外）。

可以通过 v-bind="$attrs" 将 $attrs 传入内部组件，实现属性的批量传递。

$listeners：

$listeners 包含了父作用域中的（不含 .native 修饰器的）v-on 事件监听器。

它可以通过 v-on="$listeners" 传入内部组件，使得子组件能够直接监听在父组件上定义的事件。

例子

假设我们有三个组件：A.vue、B.vue 和 C.vue，它们构成了一个隔代组件通信的场景。

A.vue（祖父组件）

vue

<template>

  <div>

    <b-child :name-to-b="nameToB" :name-to-c="nameToC" @button-click="handleClick"></b-child>

  </div>

  <script>

  import BChild from './B.vue';

  export default {

    data() {

      return {

        nameToB: '给B组件的名字',

        nameToC: '给C组件的名字',

      };

    },

    components: {

      BChild,

    },

    methods: {

      handleClick() {

        console.log('按钮被点击了！');

      },

    },

  };

  </script>

 

B.vue（父组件）

vue

<template>

  <div>

    <p>我是B组件，接收到的名字是：{{ nameToB }}</p>

    <c-child v-bind="$attrs" v-on="$listeners"></c-child>

  </div>

  <script>

  import CChild from './C.vue';

  export default {

    props: ['nameToB'],

    components: {

      CChild,

    },

  };

  </script>

 

C.vue（子组件）

vue

<template>

  <div>

    <p>我是C组件，接收到的名字是：{{ $attrs.nameToC }}</p>

    <button @click="$emit('button-click')">点击我，通知A组件</button>

  </div>

  <script>

  export default {

    // 这里没有声明任何props，所以$attrs中会包含所有从A组件传递下来的未被子组件声明的属性

  };

  </script>

 

在这个例子中，A组件（祖父组件）向B组件（父组件）传递了两个属性（nameToB 和 nameToC）和一个事件监听器（button-click）。B组件使用 v-bind="$attrs" 将未声明的属性（在这里是 nameToC）传递给C组件（子组件），并使用 v-on="$listeners" 将事件监听器传递给C组件。这样，C组件就可以直接访问 nameToC 属性，并触发 button-click 事件，而这个事件最终会被A组件监听到。