javascript - Pasando slots en la función de render h() en Vue3

Estoy un poco confundido sobre cómo convertir esta plantilla a una función h() en 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>

He intentado esto, pero sé que estoy haciendo algo mal

 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')] )

Cualquier ayuda es realmente apreciada.

Respuesta #1

h('template') no es necesario para las etiquetas de plantilla, solo devuelve el contenido dentro del objeto (de los 3 parámetros)
el niño es una ranura por defecto, por lo que debe declararse como tal (default:)
y el p no está en el ejemplo de la plantilla, y tampoco lo necesitas en la función de renderizado, solo devuelve el texto

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'
  }
)

más información en: https://vuejs.org/guide/extras/render-function.html#passing-slots