如何使用 ts 在 vue3 的渲染函数中公开组件方法

Posted 2023-02-23

【中文标题】如何使用 ts 在 vue3 的渲染函数中公开组件方法

【英文标题】：how to expose component methods in render function in vue3 with ts

【发布时间】：2021-08-23 22:01:04

【问题描述】：

我想调用父文件中的子组件方法，子组件是由渲染函数创建的。 下面是我的代码

child.ts

export default 
  setup(props) 
    //...

    const getCropper = () => 
      return cropper
    

    return () =>
      // render function
      h('div',  style: props.containerStyle , [
      ])
  

父.ts

<template>
 <child-node ref="child"></child-node>
</template>

<script>
export default defineComponent(
  setup()
    const child =ref(null)
    
    // call child method
    child.value?.getCropper()


    return  child 
  

)
</script>

【问题讨论】：

我不确定是否有适合 TS 的方式来执行此操作。考虑打开一个问题。

@EstusFlask 谢谢你的建议。我会努力去做的。

我发布了现在可以完成的方式，但是 afaik Vue 不会为你处理类型。

【参考方案1】：

可以使用expose扩展组件实例，这对于setup返回值已经是渲染函数的情况很有用：

type ChildPublicInstance =  getCropper(): void 
  ...
  setup(props: , context: SetupContext) 
    ...
    const instance: ChildPublicInstance =  getCropper ;
    context.expose(instance);
    return () => ...
  

expose暴露的实例类型不安全，需要手动输入，例如：

const child = ref<ComponentPublicInstance<, ChildPublicInstance>>();

child.value?.getCropper()