Vue3中如何在h()渲染函数中传递插槽？

你之前的代码错误在于用h('template')来定义命名插槽，Vue 3的h()函数中，组件的插槽需要通过第三个参数的对象形式传递，而非作为子元素数组的一部分。

正确实现代码 #

return h(NTooltip, { trigger: 'hover' }, {
  // 对应模板中的#trigger命名插槽
  trigger: () => h(NButton, null, 'Duck'),
  // 对应模板中的默认插槽内容
  default: () => 'If it looks like a duck, walks like a duck, and quacks like a duck...it must be a duck'
})

如果需要给默认插槽内容包裹<p>标签，可修改为：

return h(NTooltip, { trigger: 'hover' }, {
  trigger: () => h(NButton, null, 'Duck'),
  default: () => h('p', null, 'If it looks like a duck, walks like a duck, and quacks like a duck...it must be a duck')
})

关键说明 #

• Vue 3渲染函数中，组件的命名插槽需以键值对的形式放在h()的第三个参数对象中，键名对应插槽名称（如trigger），值可以是返回VNode的函数，也可以直接是VNode/文本节点。
• 你之前尝试的h('template')方式不适用于定义组件插槽，template标签在渲染函数中仅用于条件渲染或列表渲染的包裹，并非插槽定义方式。

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