menu

Questions & Answers

how to define the return value type of app.mount()

how to define the return value type of app.mount()

I have a component and want to create Multiple application instances, but when I use the return value of the mount() to modify the variables associated with the component, ts prompts me that

Property 'content' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, {}>'

here is my component, and expose content

// myComponent
<template>
hello
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const content = ref('')
defineExpose({ content })
</script>

mount component to dom in main.ts

// main.ts
import myComponent from './myComponent.vue'
const tooltipInstance = createApp(myComponent).mount('#v-tooltip')
tooltipInstance.content = 'xxx'

At this time, ts reports an error for tooltipInstance.conent

Property 'content' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.ts(2339)

Is there any way to get the type of component and apply it to the return value of app.mount()

Answers(2) :

From the documentation:

interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}

As you can see the mount method returns a ComponentPublicInstance and furthermore,

For each app instance, mount() can only be called once.

So I do not think you can do what you desire in the mount method.

Comments:
2023-01-11 09:30:10
ComponentPublicInstance is a generics, I don't know how to pass parameters. As for For each app instance, mount () can only be called once, there is no need to worry about that. myComponent in the demo only used to mount on #v-tooltip

Although the editor will give an error prompt, the value of content can be obtained. For example, I set it to 'xxx', which can be printed on the console, which means that the value can be obtained. But before that, you need to set a container with the id of v-tooltip in index.html under the project root directory to mount your instance

// index.html
<div id="v-tooltip"></div>
// myComponent
<template>
hello
</template>
    
<script lang="ts" setup>
import { ref } from 'vue'
const content = ref('Hello World')
defineExpose({ content })
</script>
// main.ts
const app = createApp(myComponent);
const temp = app.mount('v-tooltip')
console.log(temp.content) // The editor will still prompt errors here, 
// but in fact, you have exposed this attribute through the defineExpose method. 
// Expected: output 'Hello World', actual: output 'Hello World'
Comments:
2023-01-11 09:30:10
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
2023-01-11 09:30:10
Yes, although ts reports an error, it can operate normally
2023-01-11 09:30:10
I do have two mounted dom in index.html <div id="app"></div><div id="v-tooltip"></div>