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<delMemberType> = 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>