在 h() 中传递槽在 Vue3 中渲染 function

Question

I'm a bit confused on how to convert this template to an h() function in Vue 3

<n-tooltip trigger="hover">
 <template #trigger>
 <n-button> Duck </n-button>
 </template>
 If it looks like a duck, walks like a duck, and quacks like a duck...it must
 be a duck.
</n-tooltip>

I've tried this but I know I'm doing something wrong

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

Any help is really appreciated.

Answer 1

• h('template') is not needed for template tags, just return the content inside the object (of the 3 param)
• the child is default slot so it should be declared as such ( default: )
• and the p is not in the template example, and you don't need it in the render function either, just return the text

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

more info at: https://vuejs.org/guide/extras/render-function.html#passing-slots