介绍插槽

插槽就相当于一个占位符，父组件把值填充到子组件定义的slot插槽里面，有四种插槽，匿名插槽、具名插槽、作用域插槽、动态插槽

匿名插槽

利用占位符solt，直接在子组件定义<slot></slot>就是匿名插槽，父组件通过v-slot插入数据

子组件使用slot占位

  <div>
    <slot></slot>
  </div>

父组件v-slot去绑定

  <Dialog>
    <template v-slot>
        春风吹又生
    </template>
  </Dialog>

具名插槽

给插槽定义不同的名字，根据name去定义，使用的时候v-slot:定义的name名字就可以插入想要的数据了

子组件用name定义具名，header

 <slot name="header"></slot>

父组件通过v-slot:name来使用，可以简写为#name

  <Dialog>
    <template v-slot:header>
        header
    </template>
  </Dialog>

作用域插槽

子组件通插槽slot绑定的数据，通过插槽传给父组件，父组件调用传过来的值，这种就叫做作用域插槽，下面用代码演示一下

子组件定义一个prop数据(data)，可以定义多个数据，和父子组件传值一样

   <header>
    <div v-for="item in data">
      <slot :data="item"></slot>
    </div>
   </header>

父组件通过v-slot="{data}"接收数据,可以接收多个，可以简写为#default={data}

  <Dialog>
    <template v-slot="{data}">
        {{ data.name }}
    </template>
  </Dialog>

动态插槽

通过数据可以随意改变的方式，插入具体的插槽中

父组件通过#[]的方式，来定义是那个插槽,只需要动态的改变定义name的插槽名字

let name = ref('header');
  <Dialog>
    <template #[name]>
      <div>春风吹又生</div>
    </template>
  </Dialog>