vue中的slot(插槽)

插槽slot

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置。父组件往子组件中插入一些内容。用<slot></slot>表示。

插槽的分类：默认插槽，具名插槽，作用域插槽
1. 默认插槽
默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据

子组件：
<div>
    <slot></slot>
</div>
父组件：
<heads>你好</heads>

2. 具名插槽
具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。

# 子组件：
<template>
  <div class='button'>
      <slot name='one'> 这就是默认值1</slot>
      <slot name='two'> 这就是默认值2 </slot>
      <slot name='three'> 这就是默认值3 </slot>
  </div>
</template>
# 父组件：
<template>
  <div class='app'>
     <ebutton> 
        <template v-slot:one> 这是插入到one插槽的内容 </template>
        <template v-slot:two> 这是插入到two插槽的内容 </template>
        <template v-slot:three> 这是插入到three插槽的内容 </template>
     </ebutton>
  </div>
</template>
当然 vue 为了方便，书写 v-slot:one 的形式时，可以简写为 #one

3. 作用域插槽
作用域插槽是带数据的插槽，子组件提供给父组件的参数

//子组件 ： (假设名为：ebutton)
<template>
  <div class='button'>
      <slot name='one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot
  </div>           
</template>

new Vue({
  el:'.button',
  data:{
    child1:'数据1',
    child2:'数据2'
  }
})

//父组件：（引用子组件 ebutton）
<template>
  <div class='app'>
     <ebutton> 
        <template v-slot:one = 'slotone'>  
           {{ slotone.value1 }}    // 通过v-slot的语法 将子组件的value1值赋值给slotone 
        </template>
        <template v-slot:default = 'slottwo'> 
           {{ slottwo.value2 }}  // 同上，由于子组件没有给slot命名，默认值就为default
        </template>
     </ebutton>
  </div>
</template>

总的来说

• 首先在子组件的slot上动态绑定一个值( :key='value')
• 然后在父组件通过v-slot:name = 'values'的方式将这个值赋值给 values
• 最后通过{{ values.key }}的方式获取数据