Vue2.0、3.0使用插槽(包含JSX语法)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、前言

插槽在日常开发中使用频率是比较高的，在组件化的模式下能帮助我们更好的个性化定制组件，降低组件耦合性。这里首先记录vue的三种插槽，再另外记录jsx语法下如何使用插槽。

二、插槽的分类

1. 默认插槽

在子组件中定义<slot></slot>即可

父组件使用时直接输入即可

// my-header 子组件
<template>
    <div>
        <slot></slot>
    </div>
</template>
// 父组件
<my-header>
    <h1>title</h1>
</my-header>

2. 具名插槽

在子组件中定义<slot name="xxx"></slot>，其中xxx即为插槽的名字

父组件需要使用<template v-slot:xxx></template>

// my-header 子组件
<template>
    <div>
        <slot name='title'></slot>
    </div>
</template>
// 父组件
<my-header>
    <template v-slot:title>
        <h1>title</h1>
    </template>
</my-header>

3. 作用域插槽

在子组件中定义<slot :aaa="xxx"></slot>，其中aaa为动态属性名，xxx为data中的数据名

父组件通过v-slot处接收

// my-header 子组件
<template>
    <div>
        <slot name='title' :detail='someDetail' :key='myKey'></slot>
    </div>
</template>
// 父组件
<my-header>
    <template v-slot:title='titleProps'>
        <h1>标题内容 {{ titleProps.detail }} --- 关键字 {{ titleProps.key }}</h1>
    </template>
</my-header>

三、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()