在vue3.0的JSX语法下使用插槽

由于在vue2中JSX的语法在渲染和代码简洁度上有优化，偶尔也会用JSX的形式封装组件；新的项目里开始用vue3发现，以前丢插槽的两种方式行不通了，得想想办法才行。

// vue2 插槽写法
render (h) {
	const {  $scopedSlots } = this
	// 第一种
	const {
      title = () => h('p' , { style : 'margin-top: 0' } , this.title) ,
    } = $scopedSlots
    return h('el-popover' , {
      class : 'md-button' ,
      ref : 'popover' ,
      props : { placement } ,
   	} , [title(this)])
   	
   	// 第二种
   	return h('el-popover' , {
      class : 'md-button' ,
      ref : 'popover' ,
      props : { placement } ,
    } , [
      // reference 插槽
      h('el-button' , {
        props : $props ,
        slot : 'reference' ,
      } , ($scopedSlots.default || ((O_o) => '^_^'))(this)) ,
    ])
}

最后在element-plus发现到了一种方式，定义好键名相同的插槽和内容后，利用v-slots丢进去就没问题了

const slots = {
  default : this.$slots.default ,
  // ↓键名必须要和插槽名相同
  footer : () => {
    return <span class="dialog-footer"></span> 
  }
}
const dialog = () => {
return <el-dialog  v-model={this.visible} v-slots={ slots }/>
}
return  dialog()