Vue Composition Api - 调用使用渲染功能的子组件的方法

Question

我在 Vue2 中使用 Vue composition-api。
当我尝试使用父组件的渲染函数调用组件的方法时遇到了问题。

不带渲染功能也可以。

模板组件.vue

<template>
...
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  setup (props, context) {
    const doSomething = () => {
      console.log('doSomething')
    }
    return {
      // publish doSomething method.
      doSomething
    }
  }
})
</script>

所以，父组件可以这样调用 TemplateComponent 的方法。

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>

使用渲染功能，我找不到调用方法的方法。

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>

当使用组合api声明渲染函数时，我们应该在setup方法中返回渲染函数。 https://v3.vuejs.org/guide/composition-api-setup.html#usage-with-render-functions

在这种情况下，我不明白如何发布 doSomething 方法。
有没有办法解决这个问题？

Answer 1

expose context method 的存在是为了在setup 中结合渲染函数和公共实例方法：

context.expose({ doSomething })
return () => ...