Vue中如何让Toolbar组件调用子路由组件内的搜索函数？

以下是几种适配你布局结构的实现方案，按推荐优先级排序：

方案一：状态管理（Pinia/Vuex）【最推荐】 #

通过全局状态管理存储搜索关键词，让Toolbar负责更新状态，路由组件监听状态变化并触发搜索。这种方式完全解耦组件，适合中大型项目，维护成本低。

示例代码（Pinia） #

1. 定义搜索状态仓库

// stores/searchStore.js
import { defineStore } from 'pinia'

export const useSearchStore = defineStore('search', {
  state: () => ({
    searchKeyword: ''
  }),
  actions: {
    setSearchKeyword(keyword) {
      this.searchKeyword = keyword
    }
  }
})

2. Toolbar组件更新状态

<!-- Toolbar.vue -->
<template>
  <input 
    type="text" 
    @input="handleInput" 
    placeholder="输入关键词搜索..."
  >
</template>

<script setup>
import { useSearchStore } from '@/stores/searchStore'
const searchStore = useSearchStore()

const handleInput = (e) => {
  searchStore.setSearchKeyword(e.target.value)
}
</script>

3. 路由表格组件监听状态并触发搜索

<!-- TableComponent.vue -->
<template>
  <el-table :data="filteredTableData">...</el-table>
</template>

<script setup>
import { useSearchStore } from '@/stores/searchStore'
import { watch, computed } from 'vue'
const searchStore = useSearchStore()

// 假设原始表格数据
const tableData = ref([/* 数据内容 */])

// 搜索函数
const searchTable = (keyword) => {
  // 这里写你的搜索逻辑：比如过滤本地数据或发起接口请求
}

// 监听关键词变化，自动触发搜索
watch(
  () => searchStore.searchKeyword,
  (newKeyword) => {
    searchTable(newKeyword)
  },
  { immediate: true } // 可选：页面初始化时执行一次搜索
)
</script>

方案二：全局事件总线（Vue2/Vue3通用） #

通过事件订阅/发布机制，让Toolbar触发搜索事件，路由组件监听事件并执行搜索。适合小型快速开发项目。

示例代码（Vue3使用mitt库） #

1. 安装并定义事件总线

npm install mitt

// utils/bus.js
import mitt from 'mitt'
export const bus = mitt()

2. Toolbar组件触发事件

<!-- Toolbar.vue -->
<template>
  <input 
    type="text" 
    @input="handleInput" 
    placeholder="输入关键词搜索..."
  >
</template>

<script setup>
import { bus } from '@/utils/bus'

const handleInput = (e) => {
  bus.emit('trigger-search', e.target.value)
}
</script>

3. 路由表格组件监听事件

<!-- TableComponent.vue -->
<template>
  <el-table :data="tableData">...</el-table>
</template>

<script setup>
import { bus } from '@/utils/bus'
import { onMounted, onUnmounted } from 'vue'

const searchTable = (keyword) => {
  // 搜索逻辑
}

// 挂载时订阅事件
onMounted(() => {
  bus.on('trigger-search', searchTable)
})

// 销毁时取消订阅，避免内存泄漏
onUnmounted(() => {
  bus.off('trigger-search', searchTable)
})
</script>

方案三：Provide/Inject（层级明确场景） #

在MainLayout中提供注册搜索函数的方法，路由组件注册自身的搜索函数，Toolbar触发时调用已注册的函数。适合组件层级固定的场景。

示例代码 #

1. MainLayout提供方法并处理Toolbar事件

<!-- MainLayout.vue -->
<template>
  <Toolbar @input="handleToolbarInput" />
  <Content>
    <router-view />
  </Content>
</template>

<script setup>
import { ref, provide } from 'vue'
import Toolbar from './Toolbar.vue'
import Content from './Content.vue'

// 存储当前激活的搜索函数
const currentSearchFn = ref(null)

// 提供注册搜索函数的方法
provide('registerSearchFn', (fn) => {
  currentSearchFn.value = fn
})

// Toolbar输入时触发搜索
const handleToolbarInput = (e) => {
  currentSearchFn.value?.(e.target.value)
}
</script>

2. 路由表格组件注册搜索函数

<!-- TableComponent.vue -->
<script setup>
import { inject, onUnmounted } from 'vue'

const registerSearchFn = inject('registerSearchFn')

const searchTable = (keyword) => {
  // 搜索逻辑
}

// 注册自身的搜索函数
registerSearchFn(searchTable)

// 销毁时清空，避免路由切换后旧函数被调用
onUnmounted(() => {
  registerSearchFn(null)
})
</script>

方案四：refs获取路由组件实例【不推荐】 #

通过refs获取router-view渲染的组件实例，直接调用其搜索函数。但这种方式耦合性极高，路由切换时需要手动更新实例，维护成本高，仅适合临时快速验证。

示例代码 #

1. MainLayout获取路由组件实例

<!-- MainLayout.vue -->
<template>
  <Toolbar @input="handleToolbarInput" />
  <Content>
    <router-view ref="routerViewRef" />
  </Content>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import Toolbar from './Toolbar.vue'
import Content from './Content.vue'

const routerViewRef = ref(null)
const route = useRoute()
let currentTableInstance = null

// 监听路由变化，更新组件实例
watch(
  () => route.name,
  () => {
    currentTableInstance = routerViewRef.value
  },
  { immediate: true }
)

const handleToolbarInput = (e) => {
  currentTableInstance?.searchTable?.(e.target.value)
}
</script>

2. 路由表格组件暴露搜索函数

<!-- TableComponent.vue -->
<script setup>
const searchTable = (keyword) => {
  // 搜索逻辑
}

// 暴露函数给父组件
defineExpose({
  searchTable
})
</script>

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