Vue单文件组件(SFC)使用render函数报错：提示缺少模板或渲染函数

你的代码存在两个核心问题，导致组件无法识别渲染逻辑：

1. 未将h()生成的内容注册为组件的渲染输出
2. 插槽使用方式错误，slots.default是函数需调用才能获取内容

下面是两种可行的修复方案：

方案一：在<script setup>中用defineOptions定义render函数 #

<script setup lang="ts">
import { h, useSlots } from "vue";
const slots = useSlots();

// 通过defineOptions显式指定组件的render函数
defineOptions({
  render() {
    // 调用slots.default()获取插槽内容，可选链避免无插槽时报错
    return h('div', {}, slots.default?.());
  }
});
</script>

方案二：改用普通<script>导出组件选项 #

如果不需要<script setup>的语法糖，也可以直接用传统方式定义组件：

<script lang="ts">
import { defineComponent, h, useSlots } from "vue";

export default defineComponent({
  setup() {
    const slots = useSlots();
    // setup返回的函数会被作为组件的render函数
    return () => h('div', {}, slots.default?.());
  }
});
</script>

关键说明 #

• <script setup>中直接调用h()不会自动成为组件的渲染逻辑，必须通过defineOptions显式声明render选项，或者在普通组件的setup中返回渲染函数。
• 所有插槽（包括默认插槽）都是返回VNode数组的函数，必须调用才能拿到实际内容，否则无法正确渲染。

内容的提问来源于stack exchange，提问作者Vik Vin