slot插槽

为什么要使用slot

说道插槽，我们首先想到的会是电脑的usb插口，它既可以插手机，键盘，鼠标，还可以插盘，一个小小的插口，可以接收不同的值，就像solt标签一样


比如，我们经常看到购物车的导航丽娜，他们的内容虽然不一样，但是我们可以看出来他们的结构都是一样的，或者说，当父组件引入子组件后，我们不想单一的用一种标签来实现，这个时候我们都可以用slot来实现

slot的基本用法

//父组件
  <div class="wrapper">
    <cpn> <button>按钮</button> </cpn>
    <cpn> <p>p标签</p> </cpn>
    <cpn> <b>b标签</b> </cpn>
    <cpn> <b>b标签</b> </cpn>
    <cpn></cpn>
    <!-- 不传时，将使用默认值 -->
    <cpn> 
      <p>p1</p>
      <p>p2</p>
      <p>p3</p>
    </cpn>
    <!-- 传入多个时，全部替换 -->
  </div>
//子组件
<div>
  <h1>我是子组件</h1>
  <slot> <button>按钮</button> </slot>
</div>

具名插槽的用法

比如我们的导航栏，他是由左 中 右，三个部分组成的，那么这些插槽如何去分辨哪一个才是所匹配的呢

如果我们直接在父组件中写上一个span标签，他会发生什么呢？

我们可以看到，他把三个插槽都替换掉了
具名插槽，顾名思义，就是他有个名字，(●—●)

//父组件
<div>
   <cpn>
     <button slot="center">替换中间</button>
     <span>我是默认</span>
   </cpn>
 </div>
//子组件
 <div>
   <slot name="left"><span>左边</span> </slot>
   <slot name="center"><span>中间</span> </slot>
   <slot name="right"><span>右边</span> </slot>
   <slot></slot>//没有name属性的，就是默认的
 </div>

可以看到，当有了name属性之后，他就会找到与之对应的插槽

作用域插槽

比如说，父组件中引入了三次子组件，但是我想让他显示的效果不同该怎么办呢？

//父组件
<template>
  <div>
    <!-- 需要获取到子组件中的arr -->
    <cpn></cpn>
    <cpn>
      <!-- slot-scope是固定格式 -->
      <template slot-scope="slot">
        <ul>
          <li v-for="item in slot.data" :key="item">{
     {
     item*2}}</li>
        </ul>
      </template>
    </cpn>
    <cpn>
       <template slot-scope="slot">
         <p>
           <span v-for="item in slot.data" :key="item"> - {
     {
     item}} - </span>
         </p>
      </template>
    </cpn>
  </div>
</template>

//子组件
<template>
  <div>
    <!-- 子组件中，定义了一个数组 arr=[1,2,3,4,5]  -->
    <slot :data='arr'>
      <ul>
        <li v-for="item in arr" :key="item">{
     {
     item}}</li>
      </ul>
    </slot>
  </div>
</template>