Vue3使用render函數(shù)渲染插槽,以Naive UI為例
網(wǎng)上有好多解釋rende函數(shù)和插槽原理的文章,不可否認(rèn)他們的水平都比我高,只是我這篇文章更加注重"術(shù)\法\道"中的術(shù),
少廢話,上代碼:
h(
NPopconfirm,
{
onPositiveClick: () => positiveClick(),
negativeText: 'negativeText',
positiveText: 'positiveText'
},
{
trigger: () => //trigger插槽的內(nèi)容
h(
NButton,
{}, //被render的元素的屬性啥的,可以自定義
[
//h('i', {class: ['iconfont', 'icon-xiajia']}), //這里是放被button包裹的元素
h('span', {}, 'button上的文字')
]
),
default: 'popconfirm的默認(rèn)提示詞') //默認(rèn)內(nèi)容
}
)
如果用Dom寫是這樣的:
<NPopconfirm
@positive-click="positiveClick"
negative-text="negativeText"
positive-text="positiveText"
>
<template #trigger>
<NButton>button上的文字</NButton>
</template>
popconfirm的默認(rèn)提示詞
</NPopconfirm>
最終效果是這樣的
一般來說render函數(shù)第三個參數(shù)是數(shù)組的,但是如果是插槽的話就得用對象的寫法了
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
