vue 父组件与孙子组件事件通讯

在 Vue 中，父组件和孙子组件之间的通讯可以通过事件派发和监听来实现。

首先，在孙子组件中定义一个方法，并在其中触发一个自定义事件：

methods: {
  handleClick() {
    this.$emit('myEvent', 'Hello from Grandson component');
  }
}

然后，在父组件中监听这个事件，并在方法中处理：

<template>
  <div>
    <h1>{{ message }}</h1>
    <Grandparent @myEvent="handleEvent"></Grandparent>
  </div>
</template>

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

export default {
  components: {
    Grandparent,
  },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleEvent(message) {
      this.message = message;
    },
  },
};
</script>

最后，在父组件中的模板中，使用 Grandparent 组件，并在其中绑定自定义事件的处理方法：

<template>
  <div>
    <Parent>
      <Grandson @myEvent="handleEvent"></Grandson>
    </Parent>
  </div>
</template>

<script>
import Parent from './Parent.vue';
import Grandson from './Grandson.vue';

export default {
  components: {
    Parent,
    Grandson,
  },
  methods: {
    handleEvent(message) {
      console.log(message);
    },
  },
};
</script>

这样，当孙子组件触发自定义事件时，父组件会接收到处理方法并进行处理。