Vue2 Composition Api下如何调用返回渲染函数的子组件方法

问题原因 #

当setup函数直接返回渲染函数时，返回值会被识别为组件的render函数，原本返回对象中要对外暴露的实例属性不会被自动挂载到组件实例上，因此父组件通过ref无法直接访问到内部定义的方法。

解决方案 #

方案1：使用 context.expose 主动暴露（推荐） #

直接通过setup入参的context对象的expose方法，主动声明需要对外暴露的属性和方法即可，父组件调用逻辑无需修改。
修改后的RenderComponent.vue代码如下：

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

export default defineComponent({
  setup (props, context) {
    const doSomething = () => {
      console.log('doSomething')
    }
    // 主动对外暴露方法
    context.expose({
      doSomething
    })
    // 返回渲染函数
    return () => h('div', 'Hello world!!')
  }
})
</script>

方案2：通过getCurrentInstance挂载（兼容旧版本） #

如果使用的@vue/composition-api版本较低不支持context.expose，可以通过获取当前组件实例，手动挂载需要暴露的方法：

<script lang="ts">
import { defineComponent, h, getCurrentInstance } from '@vue/composition-api'

export default defineComponent({
  setup (props, context) {
    const vm = getCurrentInstance()
    const doSomething = () => {
      console.log('doSomething')
    }
    // 手动将方法挂载到组件实例
    if (vm) {
      (vm as any).doSomething = doSomething
    }
    return () => h('div', 'Hello world!!')
  }
})
</script>

两种方案下父组件的调用逻辑都和之前调用模板组件的逻辑完全一致，不需要做额外调整。

内容的提问来源于stack exchange，提问作者A-Ota