Vue子页面如何向继承的父模板（GuestLayout）通过$emit传递事件并接收

我来帮你梳理下问题的核心，然后给出几个符合Vue惯用写法的解决方案，你可以根据自己的需求选择：

首先得明确一个关键的组件关系：你在Page组件里写了<GuestLayout>，这意味着Page是父组件，GuestLayout是它的子组件。你原来用this.$emit('receive', x)是行不通的，因为$emit是子组件向父组件发送事件的方式，反过来父组件要给子组件传递数据或触发方法，得用其他方式，这就是你代码没生效的原因。

下面是两种最适合你场景的解决办法：

方案1：通过Ref直接调用子组件的方法 #

这是最直接贴合你原有思路的方式——让Page调用GuestLayout里的receive方法来添加错误：

1. 先给Page里的GuestLayout加上ref标记，方便获取子组件实例：

<template>
  <GuestLayout ref="guestLayout"> <!-- 这里添加ref标记 -->
    <template v-slot:nav>
      <Header />
    </template>
    <template v-slot:content>
      <div></div>
    </template>
  </GuestLayout>
</template>

2. 完善GuestLayout的receive方法，把错误添加到它自己的errors数组里：

<script>
import Toast from '../Components/Toast.vue'
export default {
  components: { Toast },
  data() {
    return { errors: [] }
  },
  methods: {
    receive(error) {
      console.log('收到错误:', error)
      this.errors.push(error) // 把错误塞进数组，Toast就能自动显示了
    }
  }
}
</script>

3. 在Page的onLoginSubmit方法里，通过ref调用GuestLayout的receive方法：

async onLoginSubmit() {
  const response = await fetch('/login', {
    method: 'POST',
    body: JSON.stringify(this.forms.login),
    headers: { 'Content-Type': 'application/json' } // 别忘了加这个header，后端才能解析JSON请求体
  })
  const json = await response.json()

  if (!response.ok) {
    const errors = this.jsonResponseHelpers.flattenErrors(json.errors);
    // 遍历错误，调用子组件的receive方法
    for (const x of errors) {
      this.$refs.guestLayout.receive(x)
    }
  }
}

方案2：用Props传递错误数组（更符合Vue单向数据流） #

如果你想遵循Vue的单向数据流原则（父组件维护数据，子组件只负责展示），可以用props来传递错误列表：

1. 修改GuestLayout，把原来的errors从data改成props：

<script>
import Toast from '../Components/Toast.vue'
export default {
  components: { Toast },
  props: {
    errors: {
      type: Array,
      default: () => [] // 默认空数组
    }
  }
}
</script>
<template>
  <main class="flex flex-col h-full">
    <Toast :errors="errors" />
    <slot name="nav" />
    <slot name="content" />
  </main>
</template>

2. 在Page组件里维护自己的错误数组，然后通过props传给GuestLayout：

<script>
import GuestLayout from '../Layouts/Guest.vue'
import Header from '../Components/Header.vue'
import JsonResponseHelpers from '../Helpers/JsonResponse'

export default {
  components: { GuestLayout, Header },
  data() {
    return {
      jsonResponseHelpers: new JsonResponseHelpers(),
      errors: [] // Page自己维护错误数组
    }
  },
  methods: {
    async onLoginSubmit() {
      const response = await fetch('/login', {
        method: 'POST',
        body: JSON.stringify(this.forms.login),
        headers: { 'Content-Type': 'application/json' }
      })
      const json = await response.json()

      if (!response.ok) {
        this.errors = this.jsonResponseHelpers.flattenErrors(json.errors);
      }
    }
  }
}
</script>
<template>
  <GuestLayout :errors="errors"> <!-- 把错误数组传给子组件 -->
    <template v-slot:nav>
      <Header />
    </template>
    <template v-slot:content>
      <div></div>
    </template>
  </GuestLayout>
</template>

额外小提示 #

你原来的fetch请求里没加Content-Type: application/json请求头，很多后端框架（比如Laravel、Express）默认不会解析JSON格式的请求体，加上这个header才能确保后端正确接收你的登录参数。

内容来源于stack exchange