如何使用Vue的h()渲染函数渲染组件子内容

要渲染父组件传入的子内容，你需要在组件中访问插槽(slots)，并把插槽内容作为h()函数的子节点参数传入。以下是具体实现方式：

方式1：通过setup上下文获取slots #

直接在setup函数的第二个参数中解构出slots对象，然后在h()的第三个参数里传入默认插槽的内容：

<script lang="ts">
import { h } from 'vue';

export default {
  setup (props, { slots }) {
    // 渲染默认插槽内容，没传内容时用空数组兜底
    return () => h('div', {}, slots.default?.() || []);
  }
};
</script>

如果想保留原组件的文本内容，同时添加子内容，把文本和插槽内容合并成数组即可：

<script lang="ts">
import { h } from 'vue';

export default {
  setup (props, { slots }) {
    return () => h('div', {}, [
      'This is a test',
      ...(slots.default?.() || [])
    ]);
  }
};
</script>

方式2：使用useSlots钩子（Composition API风格） #

如果你偏好更灵活的Composition API写法，可以用useSlots()钩子获取插槽内容：

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

export default {
  setup () {
    const slots = useSlots();
    return () => h('div', {}, slots.default?.() || []);
  }
};
</script>

原理说明 #

父组件在<Test>标签内写的子内容，会被Vue自动收集到组件的**默认插槽(default slot)**中。通过slots.default()可以获取到这些子内容的VNode数组，把它作为h()函数的第三个参数（子节点位置），就能将传入的子内容渲染出来。

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