For <component :is="Math.random() > 0.5 ? Foo : Bar" />, I define a function ChangeFooName in Foo and a function ChangeBarName in Bar, how to use the function in Foo or Bar when Foo or Bar is rendered?

[LZS1991]

For , I define a function ChangeFooName in Foo and a function ChangeBarName in Bar, when the result of ":is" is Foo, I want to use the function ChangeFooName. I have no idea how to make it.

[LinusBorg]

What do you mean exactly when you say you want to "use" that function. Where? When? How?

Are you asking about how to use it in the parent via a template ref?

[LZS1991]

The parent is like this:
<template>
<el-upload class="upload-image" ref="imageUpload" drag style="padding-top: 6px;" :show-file-list="false"
:on-success="handleThumbImage" :limit="1"
action="http://localhost:5173/api/uavais_server/image/raster_images_process/">
<component ref="uploadDataComponent" :is="showImageOrThumb ? ShowUploadIcon: ShowThumbImage"></component>
</el-upload>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { UploadProps } from "element-plus"
import ShowUploadIcon from "../components/upload/ShowUploadIcon.vue"
import ShowThumbImage from "../components/upload/ShowThumbImage.vue"

const showImageOrThumb = ref(true)
const uploadDataComponent = ref<InstanceType<typeof ShowThumbImage> | null>(null)
const handleThumbImage: UploadProps["onSuccess"] = (response, uploadFile, uploadFiles) => {
console.log("Image upload......")
console.log(response, uploadFile, uploadFiles)
console.log("==================")
showImageOrThumb.value = false
console.log("==================")
uploadDataComponent.value?.myTest()
console.log(uploadDataComponent)
}

and the ShowThumbImage is:

<template>
<el-image style="width: auto; height: 100%" :src="uploadThumbImageUrl" />
</template>

`<script setup lang="ts">`
`import { ref } from "vue";`

`const uploadThumbImageUrl = ref('')`

`const setThumbImage = () => {`
`    console.log("setThumbImage================================")`
`   uploadThumbImageUrl.value = "http://localhost:5173/api/static/temp_data/images/temp_thumb.png"`
`}`

`const deleteThumbImage = () => {`
 `   console.log("deleteThumbImage================================")`
 `  uploadThumbImageUrl.value = ""`
`}`

`const myTest = () => {`
`    console.log("myTest================================")`
`}`

`defineExpose({`
`    setThumbImage,`
`    deleteThumbImage,`
`    myTest,`
`})`

`</script>`

I want to use setThumbImage, deleteThumbImage, myTest from ShowThumbImage in handleThumbImage from The parent vue file.