vue slot插槽的使用

1.slot 解释

  <slot>可以作为承载分发内容的出口。具体来说就是在组件内添加内容的‘空间’。

插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

2.默认插槽：

//子组件 ： (子组件名为：ebutton)
<template>
  <div class= 'button'>
      <button>按钮</button>
  </div>
</template>

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton></ebutton>
  </div>
</template>

要在父组件引用的<ebutton></ebutton>标签内部添加内容是不会被显示的，要在子组件的相关位置添加slot才行。若父组件无值传递过来，可以在子组件内部设置默认值。

//父组件：使用子组件ebutton
<template>
  <div class= 'app'>
     <ebutton> {{ parent }}</ebutton>
  </div>
</template>

new Vue({
  el:'.app',
  data:{
    parent:'父组件'
  }
})

//子组件 ： (子组件名为：ebutton)
<template>
  <div class= 'button'>
      <button></button>
      //slot 就是这个‘空间’， 可以放在任意位置。（这个位置就是父组件添加内容的显示位置）
      <slot></slot>    
  </div> 
</template>

3.具名插槽（有名字的插槽）

当子组件内的slot不止一个的时候，可以给插槽一个name属性，这样可以将父组件的内容精确引用到子组件内。

//子组件 ： (子组件名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one'> 这就是默认值1</slot>
      <slot name='two'> 这就是默认值2 </slot>
      <slot name='three'> 这就是默认值3 </slot>
  </div>
</template>

父组件通过v-slot : name 的方式添加内容：

//父组件：（引用子组件 ebutton）
<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>

为了方便书写 v-slot:one 的形式，可以简写为 #one。

4.作用域插槽

在使用solt时如果父组件要使用子组件传递过来的值，可以采用v-slot的方式获取：

//子组件 ： (子组件名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </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> 

        // 通过v-slot的语法 将插槽 one 的值赋值给slotonevalue 
        <template v-slot:one = 'slotonevalue'>  
           {{ slotonevalue.value1 }}
        </template>

        // 同上，由于子组件没有给slot命名，默认值就为default
        <template v-slot:default = 'slottwovalue'> 
           {{ slottwovalue.value2 }}
        </template>

     </ebutton>
  </div>
</template>

进行3个步骤：

                1.在子组件中的slot上动态绑定一个值（:key= 'value'）

                2.父组件通过v-slot: name = 'values' 方式将值赋值给values

                3.父组件引用子组件标签内部使用{{values.key}} 获取到数据

  帅哥，点个赞再走呗，mua~