javascript - การส่ง slots ในฟังก์ชัน render h() ใน Vue3

ฉันสับสนเล็กน้อยเกี่ยวกับวิธีการแปลงเทมเพลตนี้เป็นฟังก์ชัน h() ใน 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>

ฉันพยายามทำแบบนี้แล้ว แต่ฉันรู้ว่าฉันกำลังทำอะไรผิด

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

ความช่วยเหลือใด ๆ ก็ชื่นชมอย่างมาก

คำตอบ #1

h('template') ไม่จำเป็นสำหรับแท็กเทมเพลต ให้ส่งค่าภายในออบเจ็กต์ (ของพารามิเตอร์ที่ 3) กลับมา
เด็กเป็นช่องว่างเริ่มต้น ดังนั้นควรประกาศเช่นนั้น (default:)
และ p ไม่อยู่ในตัวอย่างเทมเพลต และคุณก็ไม่จำเป็นต้องใช้มันในฟังก์ชันการเรนเดอร์เช่นกัน แค่ส่งข้อความกลับก็พอ

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

ข้อมูลเพิ่มเติมที่: https://vuejs.org/guide/extras/render-function.html#passing-slots