CODEWITHSUNDEEP
javascripttypescriptvuejs3
RIX
RIX

Reputation: 133

Passing slots in h() render function in Vue3

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.

Upvotes: 2

Views: 4176

Answers (1)

Daniel
Daniel

Reputation: 35724

  • 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

Upvotes: 5

Related Questions