vue3 provide inject

type.ts

import { InjectionKey, Ref } from 'vue'
// 对象的InjectionKey
export const associationIdKey: InjectionKey<Ref<string>> = Symbol('')
// 函数的的InjectionKey
export interface GuildMember {
    account: string
    index: number
    type: number
}
export type delMemberType = (guildMember: GuildMember) => void
 
export const delMemberKey: InjectionKey = Symbol('')

父组件

import { GuildApplyType } from '@renderer/api/guild/type'
 
const updateFormData = reactive<GuildApplyType>({})
const showHandle = ref<boolean>(false)
const currentIndex = ref<number | undefined>(undefined)
// 点击删除触发
const handleApply = async ({account,index,type}:{account: string, index: number, type: number}) => {
  showHandle.value = true
  updateFormData.associationId = associationId.value
  updateFormData.account = account
  updateFormData.type = type
  currentIndex.value = index
}
provide(delMemberKey, handleApply)
// 确认删除
const handleConfirm = async () => {
  await reqDelGuildMember(updateFormData)
  associationId.value = pageData.association.id
  showHandle.value = false
  showToast('删除成功')
}

后代组件

import { associationIdKey, delMemberKey } from '../../type'
const associationId = inject(associationIdKey)
const delGuildMember = inject(delMemberKey)

<button class="btn" @click="delGuildMember?.(item.account, index, 3)">删除button>