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

问题描述

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

child.ts

export default {
  setup(props) {
    //...

    const getCropper = () => {
      return cropper
    }

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

parent.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>

解决方法

组件实例可以通过使用 from IPython.display import display from ipyfilechooser import FileChooser # Create and display a FileChooser widget fc = FileChooser('/default/path') # Set a file filter patern fc.filter_pattern = '*.csv' display(fc) # Print the selected filename print(fc.selected_filename) 进行扩展，这对于 expose 返回值已经是渲染函数的情况很有用：

setup

type ChildPublicInstance = { getCropper(): void } ... setup(props: {},context: SetupContext) { ... const instance: ChildPublicInstance = { getCropper }; context.expose(instance); return () => ... } 暴露的实例是类型不安全的，需要手动输入，例如：

expose