Vue可配置搜索组件实现咨询：替代继承式减少冗余

针对你现在用继承抽象组件导致每个搜索场景都要新建组件的问题，这里有几个实用的优化方案，能大幅减少冗余代码：

方案1：配置化API映射 + 单通用组件 #

核心思路是做一个通用搜索组件，通过searchType props指定搜索场景，内部维护一个API函数映射表，根据场景自动调用对应API。新增场景只需要在映射表里加条目，不用新建组件。

通用组件代码示例（UniversalSearchInput.vue） #

<template>
  <input v-model="query" @input="performSearch" placeholder="输入关键词搜索"/>
  <!-- 下拉结果展示（根据你的需求调整） -->
  <div class="search-results" v-if="result && result.length">
    <div v-for="item in result" :key="item.id" class="result-item">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { queryPersons } from '../personsApi';
import { queryLocations } from '../locationsApi'; // 假设的地点API

// 搜索场景与API的映射表，新增场景直接在这里添加
const SEARCH_API_MAP = {
  person: queryPersons,
  location: queryLocations
};

export default {
  name: 'UniversalSearchInput',
  props: {
    searchType: {
      type: String,
      required: true,
      // 校验传入的场景是否合法
      validator: (value) => Object.keys(SEARCH_API_MAP).includes(value)
    }
  },
  data() {
    return {
      query: '',
      result: null
    };
  },
  methods: {
    async executeSearch(query) {
      const apiFn = SEARCH_API_MAP[this.searchType];
      if (!apiFn) throw new Error(`不支持的搜索类型：${this.searchType}`);
      return await apiFn(query);
    },
    async performSearch() {
      try {
        this.result = await this.executeSearch(this.query);
      } catch (err) {
        // 这里可以添加错误提示逻辑，比如弹窗或文字提示
        console.error('搜索失败:', err);
      }
    }
  }
};
</script>

使用方式 #

<!-- 人员搜索 -->
<UniversalSearchInput searchType="person" />

<!-- 地点搜索 -->
<UniversalSearchInput searchType="location" />

方案2：用provide/inject传递搜索逻辑 #

如果你的搜索组件在特定页面或模块内使用，不需要跨全局场景，可以用Vue的provide/inject机制，由父组件提供对应场景的API函数，通用组件直接注入使用，不需要传递props。

父组件代码 #

<script>
import { queryPersons } from '../personsApi';
import UniversalSearchInput from './UniversalSearchInput.vue';

export default {
  components: { UniversalSearchInput },
  provide() {
    return {
      searchApi: queryPersons
    };
  }
};
</script>

<template>
  <div class="person-page">
    <UniversalSearchInput />
  </div>
</template>

通用组件调整 #

<script>
export default {
  name: 'UniversalSearchInput',
  // 注入父组件提供的搜索API
  inject: ['searchApi'],
  data() {
    return {
      query: '',
      result: null
    };
  },
  methods: {
    async executeSearch(query) {
      if (!this.searchApi) throw new Error('未提供搜索API');
      return await this.searchApi(query);
    },
    async performSearch() {
      try {
        this.result = await this.executeSearch(this.query);
      } catch (err) {
        console.error('搜索失败:', err);
      }
    }
  }
};
</script>

方案3：Vue3组合式函数（Composable）封装搜索逻辑 #

如果项目用的是Vue3，推荐把搜索逻辑封装成组合式函数，通用组件通过传入API函数复用逻辑，同时保持组件的灵活性。这里需要说明：传递函数作为props并非绝对反模式，只要确保函数是稳定的（比如用useCallback包裹），就不会引发不必要的重渲染。

组合式函数（useSearch.js） #

import { ref } from 'vue';

export function useSearch(apiFn) {
  const query = ref('');
  const result = ref(null);
  const error = ref(null);

  const performSearch = async () => {
    try {
      error.value = null;
      result.value = await apiFn(query.value);
    } catch (err) {
      error.value = err;
      result.value = null;
    }
  };

  return { query, result, error, performSearch };
}

Vue3通用组件 #

<template>
  <input v-model="query" @input="performSearch" placeholder="输入关键词搜索"/>
  <div class="search-results" v-if="result && result.length">
    <div v-for="item in result" :key="item.id" class="result-item">
      {{ item.name }}
    </div>
  </div>
  <p v-if="error" class="error-text">{{ error.message }}</p>
</template>

<script setup>
import { defineProps } from 'vue';
import { useSearch } from './useSearch';

const props = defineProps({
  searchApi: {
    type: Function,
    required: true
  }
});

const { query, result, error, performSearch } = useSearch(props.searchApi);
</script>

使用方式 #

<script setup>
import { queryPersons } from '../personsApi';
import UniversalSearchInput from './UniversalSearchInput.vue';
</script>

<template>
  <UniversalSearchInput :search-api="queryPersons" />
</template>

方案选择建议 #

• 如果是多场景全局复用，优先选方案1，配置化管理最省心，新增场景成本极低；
• 如果是特定模块内的专属搜索，用方案2更简洁，不用额外传props；
• Vue3项目推荐方案3，组合式逻辑复用性更强，组件更轻量化。

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