Laravel+Vue+Inertia栈如何将Header组件数据传递到Search页面

针对你目前的项目结构，有3种常用的实现方案，从易到难分别如下：

方案1：路由携带参数，Search页自行发起请求（最推荐） #

这个方案符合路由语义，刷新页面后搜索结果也不会丢失，不需要额外引入第三方工具：

1. Header组件逻辑调整：搜索表单提交时，仅携带关键词跳转到搜索页路由：

// Header.vue 表单提交处理逻辑
async function handleSearchSubmit() {
  const searchKeywords = this.form.keywords // 替换为你自己的表单关键词变量
  this.$router.push({
    path: '/search',
    query: { q: searchKeywords }
  })
}

2. Search页逻辑实现：在页面挂载/路由参数变化时，拿到关键词自行发起axios请求获取数据：

// Search.vue 脚本示例（选项式API）
import axios from 'axios'
export default {
  data() {
    return {
      searchList: []
    }
  },
  async mounted() {
    const keywords = this.$route.query.q
    if (!keywords) return
    // 发起请求拿搜索结果
    const res = await axios.get('/api/search', { params: { keywords } })
    this.searchList = res.data
  },
  watch: {
    // 监听路由参数变化，同页面搜索不同关键词时自动更新结果
    '$route.query.q'(newKeywords) {
      if (newKeywords) {
        // 重新发起请求更新searchList即可
      }
    }
  }
}

方案2：Pinia/Vuex全局状态管理（中大型项目首选） #

如果你的项目已经在使用Pinia（Vue3）或Vuex（Vue2），可以直接通过全局状态共享数据：

1. 首先创建搜索相关的全局状态，以Pinia为例：

// /stores/search.js
import { defineStore } from 'pinia'
export const useSearchStore = defineStore('search', {
  state: () => ({
    searchResult: null
  }),
  actions: {
    saveSearchResult(data) {
      this.searchResult = data
    }
  }
})

2. Header组件拿到请求结果后，存入全局状态：

// Header.vue 请求成功后逻辑
import { useSearchStore } from '@/stores/search'
// ...省略其他代码
const res = await axios.post('/api/search', 表单参数)
const searchStore = useSearchStore()
searchStore.saveSearchResult(res.data)
this.$router.push('/search') // 跳转到搜索页

3. Search页直接从全局状态取数据渲染：

// Search.vue 取数逻辑
import { useSearchStore } from '@/stores/search'
import { storeToRefs } from 'pinia'
export default {
  computed: {
    searchResult() {
      const searchStore = useSearchStore()
      const { searchResult } = storeToRefs(searchStore)
      return searchResult.value
    }
  }
}

方案3：事件冒泡+插槽透传（小型项目无状态管理时使用） #

不需要引入额外依赖，通过组件层级逐级传递数据：

1. Header组件请求成功后，通过自定义事件把结果传给父组件MainLayout：

// Header.vue 请求成功后
const res = await axios.post('/api/search', 表单参数)
this.$emit('search-success', res.data)

2. MainLayout接收事件存储结果，通过插槽属性传给子内容：

<!-- MainLayout.vue 模板 -->
<template>
  <Header @search-success="handleSearchSuccess"></Header>
  <slot :searchResult="searchResult"></slot>
</template>
<script>
export default {
  data() {
    return {
      searchResult: null
    }
  },
  methods: {
    handleSearchSuccess(data) {
      this.searchResult = data
      this.$router.push('/search')
    }
  }
}
</script>

3. Search页通过插槽属性拿到数据即可渲染：

<!-- Search.vue 模板 -->
<MainLayout v-slot="{ searchResult }">
  <div v-for="item in searchResult" :key="item.id">
    <!-- 渲染你的搜索结果项 -->
  </div>
</MainLayout>

内容的提问来源于stack exchange，提问作者WhatNow