vue2爷孙组件通信

### Vue2 爷孙组件之间通信的方法

在 Vue2 中，爷孙组件间的通信可以通过 `$attrs` 和 `$listeners` 实现。这种方式允许祖代组件传递数据给后代组件，而不需要通过中间的父级组件。

#### 使用 $attrs 和 $listeners 进行通信

当使用 `$attrs` 时，可以将属性从祖父组件传递到孙子组件，跳过父组件。同样地，使用 `$listeners` 可以让事件监听器也能够这样传递下去[^1]。

下面是一个具体的例子来展示如何利用这些功能：

#### 示例代码

##### Grandpa.vue (祖父组件)

<template>
  <div class="grandpa">
    <h3>Grandpa Component</h3>
    <!-- 将 message 和 message2 属性以及 sendGrandpaMessage 方法传入 Child -->
    <child v-bind="$attrs" v-on="$listeners"></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  name: 'Grandpa',
  components: { Child },
  props: ['message', 'message2'],
  methods: {
    sendGrandpaMessage() {
      alert(this.message);
    }
  }
};
</script>

在这个例子中，`v-bind="$attrs"` 表示所有的未声明 prop 都会被绑定到子组件上；`v-on="$listeners"` 则表示所有自定义事件都会被转发给子组件。

##### Child.vue (父组件)

<template>
  <div class="child">
    <h4>Child Component</h4>
    <!-- 不做任何处理直接透传 attrs 和 listeners 至 grand-child -->
    <grand-child v-bind="$attrs" v-on="$listeners"></grand-child>
  </div>
</template>

<script>
import GrandChild from './GrandChild.vue';

export default {
  name: 'Child',
  components: { GrandChild },
  inheritAttrs: false // 关闭自动继承 attributes 的行为，默认为 true
};
</script>

这里设置了 `inheritAttrs: false` 是为了防止不必要的默认行为影响布局或其他样式设置。

##### GrandChild.vue (孙子组件)

<template>
  <div class="grand-child">
    <p>{{ message }}</p>
    <button @click="sendGrandpaMessage">Send Message to Grandpa</button>
  </div>
</template>

<script>
export default {
  name: 'GrandChild',
  props: ['message'], // 接收来自 grandfather 的 message 参数
  methods: {
    ...mapListeners(['sendGrandpaMessage']) // 映射并接收来自 grandfather 的方法调用
  }
};
</script>

此部分展示了如何在一个多层嵌套结构里有效地管理状态流动和交互逻辑，使得即使不是直接相连的组件也能方便地共享信息和响应动作。