Vue3使用render函数渲染插槽,以Naive UI为例

网上有好多解释rende函数和插槽原理的文章,不可否认他们的水平都比我高,只是我这篇文章更加注重"术\法\道"中的术,

少废话,上代码:

h(
  NPopconfirm,
  {
    onPositiveClick: () => positiveClick(),
    negativeText: 'negativeText',
    positiveText: 'positiveText'
  },
 {
   trigger: () =>									//trigger插槽的内容
     h(
       NButton,
       {},											//被render的元素的属性啥的,可以自定义
       [
       	 //h('i', {class: ['iconfont', 'icon-xiajia']}),  //这里是放被button包裹的元素
         h('span', {}, 'button上的文字')
       ]
     ),
   default: () =>									//默认内容
   	 h(
   		'span',
   		{},
  		'popconfirm的默认提示词'
   	  )
   )				
 }
)

这是Naive UI的popconfirm组件

如果用Dom写是这样的:

  <NPopconfirm
    @positive-click="positiveClick"
    negative-text="negativeText"
    positive-text="positiveText"
  >
    <template #trigger>
      <NButton>button上的文字</NButton>
    </template>
    popconfirm的默认提示词
  </NPopconfirm>

最终效果是这样的

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