时间戳

首页 > 解决方案 > Vue Composition Api - 调用使用渲染函数的子组件的方法

javascript - Vue Composition Api - 调用使用渲染函数的子组件的方法

问题描述

我将 Vue composition-api 与 Vue2 一起使用。
当我尝试从其父级调用具有渲染函数的组件的方法时遇到了问题。

没有渲染功能，没关系。

模板组件.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>

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

渲染组件.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 方法。
有没有办法解决这个问题？

标签： javascriptvue.js

解决方案

expose存在上下文方法以将渲染函数和公共实例方法组合在setup：

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

推荐阅读