Angular进阶：如何消除子组件依赖父组件的冗余判断？

方案1：父组件传递服务实例 #

让父组件直接传入所需的服务实例，子组件只依赖统一的方法接口，无需关心具体服务类型。

• 父组件示例：

<template>
  <ChildComponent :service="noteService" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
import NoteService from './services/NoteService'
const noteService = new NoteService()
</script>

• 子组件示例：

<template>
  <button @click="handleFetch">获取数据</button>
</template>
<script setup>
const props = defineProps({
  service: {
    type: Object,
    required: true
  }
})

const handleFetch = async () => {
  const data = await props.service.fetchData()
  // 通用数据处理逻辑
}
</script>

核心要求：所有服务类实现相同的方法名（如fetchData），保证子组件调用逻辑统一。

方案2：依赖注入（Provide/Inject） #

适用于组件嵌套较深的场景，父组件通过provide提供服务，子组件直接inject使用，避免逐层传参。

• 父组件示例：

<script setup>
import { provide } from 'vue'
import TodoService from './services/TodoService'
provide('currentService', new TodoService())
</script>

• 子组件示例：

<script setup>
import { inject } from 'vue'
const service = inject('currentService')

const handleFetch = async () => {
  const data = await service.fetchData()
  // 通用数据处理逻辑
}
</script>

方案3：组合式函数封装逻辑 #

将不同服务的调用逻辑封装为组合式函数，父组件根据需求选择函数并将结果传给子组件。

• 组合式函数示例：

// composables/useDataService.js
import NoteService from '../services/NoteService'
import TodoService from '../services/TodoService'

export function useDataService(serviceType) {
  const service = serviceType === 'note' 
    ? new NoteService() 
    : new TodoService()

  const fetchData = async () => {
    return await service.fetchData()
  }

  return { fetchData }
}

• 父组件示例：

<template>
  <ChildComponent :fetchAction="fetchData" />
</template>
<script setup>
import { useDataService } from './composables/useDataService'
const { fetchData } = useDataService('note')
</script>

• 子组件示例：

<template>
  <button @click="handleFetch">获取数据</button>
</template>
<script setup>
const props = defineProps({
  fetchAction: {
    type: Function,
    required: true
  }
})

const handleFetch = async () => {
  const data = await props.fetchAction()
  // 通用数据处理逻辑
}
</script>

方案4：抽象基类实现多态 #

定义服务基类并强制实现统一方法，所有具体服务继承基类，子组件依赖基类类型，确保调用逻辑无差别。

• 基类与具体服务示例：

// services/BaseService.js
export default class BaseService {
  async fetchData() {
    throw new Error('子类必须实现fetchData方法')
  }
}

// services/NoteService.js
import BaseService from './BaseService'
export default class NoteService extends BaseService {
  async fetchData() {
    return await api.get('/notes')
  }
}

• 子组件示例：

<script setup>
const props = defineProps({
  service: {
    type: BaseService,
    required: true
  }
})

const handleFetch = async () => {
  const data = await props.service.fetchData()
  // 通用数据处理逻辑
}
</script>

内容的提问来源于stack exchange，提问作者majew-2223