Vue3 可组合渲染

Question

是否可以创建一个使用渲染函数的可组合函数，以便它可以显示某些内容？

例子：

import { h } from 'vue'

export function useErrorHandling() {
  return {
    render() {
        return h('div', { class: 'bar', innerHTML: 'world!' })      
    }
  }
}

<script setup>
import { useErrorHandling } from './mouse.js'

 useErrorHandling()
</script>

<template>
 hello
</template>

与上面的例子的plaground

Answer 1

是的，您只需将可组合项返回的值存储在变量中并将其用作组件即可

const err =  useErrorHandling()
//in template 
// <err />

游乐场示例