vue3孙组件怎么向爷组件通信？

Question

通过搜索我知道爷组件向孙组件传递消息用provide和inject,但我现在遇到的场景是孙组件也要向爷组件传消息，请问该怎么办啊？

Answer 1

基于Monster 组和GPT的调写：
在 Vue 中，父子组件之间的通信通常是通过 props 和事件进行的。而 provide 和 inject 是用于在祖先组件和后代组件之间进行依赖注入的。

如果孙组件需要向爷组件传递消息，最简单的方法是通过事件来完成。具体做法是，孙组件可以通过 $emit 方法触发一个自定义事件，然后在爷组件中通过 v-on 指令监听该事件并执行相应的处理逻辑。

以下是一个简单的示例：

<!-- Grandparent.vue -->
<template>
  <div>
    <h1>Grandparent Component</h1>
    <ChildComponent v-on:grandchild-event="handleGrandchildEvent" />
    <p>Message from Grandchild: {{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: "",
    };
  },
  methods: {
    handleGrandchildEvent(message) {
      this.message = message;
    },
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <GrandchildComponent v-on:child-event="handleChildEvent" />
  </div>
</template>

<script>
import GrandchildComponent from "./GrandchildComponent.vue";

export default {
  components: {
    GrandchildComponent,
  },
  methods: {
    handleChildEvent(message) {
      this.$emit("grandchild-event", message);
    },
  },
};
</script>

<!-- GrandchildComponent.vue -->
<template>
  <div>
    <h3>Grandchild Component</h3>
    <button v-on:click="handleClick">Send Message to Grandparent</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit("child-event", "Hello from Grandchild");
    },
  },
};
</script>

GrandchildComponent 组件中的按钮被点击后会触发一个名为 child-event 的自定义事件，然后该事件会被 ChildComponent 组件捕获，并通过 $emit 方法再次触发一个名为 grandchild-event 的自定义事件，最终该事件被 GrandparentComponent 组件捕获并执行相应的处理逻辑。