While using Vue composition-api with Vue2, I encountered an issue when attempting to call a method of a component with a render function from its parent component.
Everything works fine without the render function.
TemplateComponent.vue
<template>
...
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
setup (props, context) {
const doSomething = () => {
console.log('doSomething')
}
return {
// expose doSomething method.
doSomething
}
}
})
</script>
Therefore, the parent component can call the method of TemplateComponent like this.
TopPage.vue
<template>
<TemplateComponent ref="componentRef" />
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from '@vue/composition-api'
import TemplateComponent from '@/components/TemplateComponent.vue'
export default defineComponent({
components: { TemplateComponent },
setup (props, context) {
const componentRef = ref()
onMounted(() => {
componentRef.value.doSomething()
})
}
})
</script>
However, with the render function, I am unable to figure out how to call the method.
RenderComponent.vue
<script lang="ts">
import { defineComponent, h } from '@vue/composition-api'
export default defineComponent({
components: { TemplateComponent },
setup (props, context) {
const doSomething = () => {
console.log('doSomething')
}
// setup method should return render function.
return () => h('div', 'Hello world!!')
}
})
</script>
When declaring a render function with the composition api, it is necessary to return a render function in the setup method. https://v3.vuejs.org/guide/composition-api-setup.html#usage-with-render-functions
In this scenario, I am unsure how to expose the doSomething method. Is there a solution to this issue?