vue的组件插槽slot

插槽的理解就是子组件用一个标签占位。父组件可以通过插槽向子组件插入dom内容，位置就是插槽标签占位的地方。
写法分两步：
1.在子组件中通过slot 开一个插槽
2.在父组件中直接插入内容即可替换slot所在的位置。
3.插槽内容可以是标签，也可以是其他的组件。
子组件：

  1.     <div>
  2.         <h2>我是子组件标签</h2>
  3.         <slot />
  4.     </div>

父组件

  1. <SlotStudy>
  2.   <div>我是父组件插入插槽的内容</div>
  3. </SlotStudy>

vue中插槽的作用域问题

插槽虽然看着是在子组件上显示的，但是插槽的作用域还是属于父组件的。
也就是说，插槽的内容在哪个组件定义，插槽上的事件，数据，都要写在对应的组件里。
插槽的作用域就是定义的组件，跟在哪里显示无关

插槽的默认内容设置

如果定义了插槽，父组件没有给内容，子组件可以定义默认内容。方法就是在slot标签之间写内容

  1. <slot>插槽默认内容</slot>

具名插槽

vue中可以使用多个插槽，多个插槽使用的时候，可以给插槽起名字，做到父子组件插槽内容一一对应。
1.子组件slot添加name
2.父组件插槽内容使用template包裹，v-slot:name 或者简写 #name
子组件

  1.     <div>
  2.         <h2>我是子组件标签</h2>
  3.         <slot name="slot1"/>
  4.         <slot name="slot2" />
  5.     </div>

父组件

  1. <SlotStudy>
  2.   <template v-slot:slot1> <div>我是插槽内容1</div> </template>
  3.   <template #slot2> <div>我是插槽内容2</div> </template>
  4. </SlotStudy>

作用域插槽

vue的特性，子组件的 slot上面除了name 是名称之外，可以定义别的属性，在父组件中可以获取到。
子组件：设置一个name作为具名插槽，设置一个id传给父组件

  1.  <slot name="slot1" id="123"/>

父组件：v-slot:slot1 slot1对应的是子组件的name，后面的slotProps是一个集合，包含了id

  1.   <template v-slot:slot1="slotProps"> <div>我是插槽内容1 ={{slotProps.id}}</div> </template>