Vue3使用render函数渲染插槽,以Naive UI为例
网上有好多解释rende函数和插槽原理的文章,不可否认他们的水平都比我高,只是我这篇文章更加注重"术\法\道"中的术,
少废话,上代码:
h(
NPopconfirm,
{
onPositiveClick: () => positiveClick(),
negativeText: 'negativeText',
positiveText: 'positiveText'
},
{
trigger: () =>
h(
NButton,
{},
[
h('span', {}, 'button上的文字')
]
),
default: 'popconfirm的默认提示词')
}
)
这是Naive UI的popconfirm组件
如果用Dom写是这样的:
<NPopconfirm
@positive-click="positiveClick"
negative-text="negativeText"
positive-text="positiveText"
>
<template #trigger>
<NButton>button上的文字</NButton>
</template>
popconfirm的默认提示词
</NPopconfirm>
最终效果是这样的

一般来说render函数第三个参数是数组的,但是如果是插槽的话就得用对象的写法了