VueJS中跨视图组件如何实现搜索框与DataTable的关联？

props和事件仅适用于直接父子组件通信，你的场景中两个组件不属于同一视图/直接父子关系，更适合用以下方案实现关联：

方案一：Pinia（Vue3 推荐） #

通过全局状态管理共享搜索值，适合全局需要复用的状态场景。

1. 创建搜索状态仓库 #

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

export const useSearchStore = defineStore('search', {
  state: () => ({
    searchText: ''
  }),
  actions: {
    updateSearchText(text) {
      this.searchText = text
    }
  }
})

2. NavBar 组件绑定搜索框 #

<template>
  <v-col cols="12" sm="6" md="6">
    <v-text-field
      v-model="search"
      id="search"
      class="w-10"
      append-icon="mdi-magnify"
      placeholder="Search"
      dense
      solo
      flat
    />
  </v-col>
</template>

<script setup>
import { useSearchStore } from '@/stores/searchStore'
import { computed } from 'vue'

const searchStore = useSearchStore()
// 双向绑定仓库中的搜索值
const search = computed({
  get() {
    return searchStore.searchText
  },
  set(val) {
    searchStore.updateSearchText(val)
  }
})
</script>

3. List.vue 组件获取搜索值 #

<template>
  <v-data-table  
    class="list px-10 pt-10"  
    v-if="!loading"  
    :headers="headers"  
    :items="list"  
    :items-per-page="itemsPerPage"  
    :search="searchText"  
    :page.sync="page"  
    @page-count="pageCount = $event"  
    show-expand  
    single-expand  
    :expanded.sync="expanded"  
    @item-expanded="loadDetails"
  />
</template>

<script setup>
import { useSearchStore } from '@/stores/searchStore'
import { computed } from 'vue'

const searchStore = useSearchStore()
// 响应式获取仓库中的搜索值
const searchText = computed(() => searchStore.searchText)

// 原有代码：headers、list、loading 等逻辑保留
</script>

方案二：Vuex（Vue2 推荐） #

Vue2 生态下的全局状态管理方案，逻辑和 Pinia 类似。

1. 创建 Vuex 仓库 #

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    searchText: ''
  },
  mutations: {
    UPDATE_SEARCH_TEXT(state, text) {
      state.searchText = text
    }
  },
  actions: {
    updateSearchText({ commit }, text) {
      commit('UPDATE_SEARCH_TEXT', text)
    }
  },
  getters: {
    getSearchText: state => state.searchText
  }
})

2. NavBar 组件绑定搜索框 #

<template>
  <v-col cols="12" sm="6" md="6">
    <v-text-field
      v-model="search"
      id="search"
      class="w-10"
      append-icon="mdi-magnify"
      placeholder="Search"
      dense
      solo
      flat
    />
  </v-col>
</template>

<script>
export default {
  computed: {
    search: {
      get() {
        return this.$store.getters.getSearchText
      },
      set(val) {
        this.$store.dispatch('updateSearchText', val)
      }
    }
  }
}
</script>

3. List.vue 组件获取搜索值 #

<template>
  <v-data-table  
    class="list px-10 pt-10"  
    v-if="!loading"  
    :headers="headers"  
    :items="list"  
    :items-per-page="itemsPerPage"  
    :search="searchText"  
    :page.sync="page"  
    @page-count="pageCount = $event"  
    show-expand  
    single-expand  
    :expanded.sync="expanded"  
    @item-expanded="loadDetails"
  />
</template>

<script>
export default {
  computed: {
    searchText() {
      return this.$store.getters.getSearchText
    }
  },
  // 原有代码：data、methods 等逻辑保留
}
</script>

方案三：Provide/Inject（适合有共同父组件场景） #

如果 NavBar 和 List.vue 有共同的上层父组件（如 App.vue），可以用这个轻量化方案。

1. 共同父组件（如 App.vue）提供状态 #

<template>
  <NavBar />
  <router-view /> <!-- 假设 List.vue 是路由组件，在此渲染 -->
</template>

<script setup>
import { ref, provide } from 'vue'
import NavBar from './components/NavBar.vue'

// 定义响应式搜索值并提供给子组件
const searchText = ref('')
provide('searchText', searchText)
</script>

2. NavBar 组件注入并绑定 #

<template>
  <v-col cols="12" sm="6" md="6">
    <v-text-field
      v-model="search"
      id="search"
      class="w-10"
      append-icon="mdi-magnify"
      placeholder="Search"
      dense
      solo
      flat
    />
  </v-col>
</template>

<script setup>
import { inject } from 'vue'

// 注入父组件提供的搜索值
const search = inject('searchText')
</script>

3. List.vue 组件注入并使用 #

<template>
  <v-data-table  
    class="list px-10 pt-10"  
    v-if="!loading"  
    :headers="headers"  
    :items="list"  
    :items-per-page="itemsPerPage"  
    :search="searchText"  
    :page.sync="page"  
    @page-count="pageCount = $event"  
    show-expand  
    single-expand  
    :expanded.sync="expanded"  
    @item-expanded="loadDetails"
  />
</template>

<script setup>
import { inject } from 'vue'

// 注入搜索值
const searchText = inject('searchText')

// 原有代码：headers、list、loading 等逻辑保留
</script>

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