Vue | 插槽

在父组件引入并使用了子组件，有时候会希望在其中插入一些元素等，就可以用到插槽

普通插槽和具名插槽

父组件

<template>
  <div title="普通插槽">
    <Child>
      <div>
        <ul style="background-color: red">
          <li>我是来自父元素的列表</li>
          <li>我是来自父元素的列表</li>
          <li>我是来自父元素的列表</li>
          <li>我是来自父元素的列表</li>
          <li>我是来自父元素的列表</li>
        </ul>
      </div>
      <p slot="right">我是来自父亲的具名插槽right</p>
    </Child>
  </div>
</template>

 components: {
          'Child': myList
        },

子组件myList.vue

<template>
  <div style="border: 1px solid green;">
    <h4>这是Child组件</h4>

    <!-- 用来接收父组件的内容 -->
    <slot></slot>

    <!--存放父组件的具名插槽-->
    <slot name="right"></slot>
    <p>我来自Child</p>
  </div>
</template>

直接加入<child>中的元素会被子组件slot接收，但具名插槽需要使用<slot name='''>才能接收 

作用域插槽: 父组件从子组件中获取数据，再规定渲染的形式（做成li,做成h1等等）。

模板虽然是在父级作用域中渲染的，却能拿到子组件的数据

父组件

<template>
  <div title="作用域插槽">
    <!--作用域渲染，必须放在template中-->
     <Child>
            <template scope="props" slot="li"><!--定义一个插槽，该插槽必须放在template标签内-->
                <li>{{props.text}}</li><!--定义使用渲染方式-->
            </template>

             <template scope="props" slot="h1"><!--定义一个插槽，该插槽必须放在template标签内-->
                <h1>{{props.text}}</h1><!--定义使用渲染方式-->
            </template>
     </Child>
  </div>
</template>

子组件

<template>
  <div style="border: 1px solid green;">
    <div>
        <ul>
            <!--list形式-->
            <slot name="li" v-for="value in list" :text=value></slot>
            <slot name="h1" v-for="value in list" :text=value></slot>
        </ul>
    </div>
  </div>
</template>

       data(){
          return{
             list:[1,2,3,4]
          }
        }

可以看到父元素中定义了两种渲染模式

1. li 模式，slot = 'li' 对应 子组件中 slot name = 'li'
2. 子组件想要使用哪种渲染模式，就使用相应的slot即可
3. scope = 'props' 是自定义名称，只要下面{{props.text}} 取数据对应上即可

借此可以完成一个需求，一个组件分为上下两个部分，上部分是一个固定头部（带一个搜索框），下部分是一个数据展示部分，有列表、卡片、纯文本等等展示，就可以使用作用域插槽。这三种展示方式，对应三种渲染方式。

---

实际应用：

普通插槽和具名插槽: vue-awesome-swiper轮播图组件 

组件源码：

<div class=swiper-container>

    <slot name=parallax-bg></slot>

    <div :class=defaultSwiperClasses.wrapperClass>
        <slot></slot>
    </div>

    <slot name=pagination></slot>
    <slot name=button-prev></slot>
    <slot name=button-next></slot>
    <slot name=scrollbar></slot>
</div>"

使用代码：

    <swiper :options="swiperOption" class="swiper-box">
       <swiper-slide class="swiper-item"><img src="..jpg" alt="..."></swiper-slide>
       <swiper-slide class="swiper-item"><img src="..jpg" alt="..."></swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
       <div class="swiper-button-next" slot="button-next"></div>
       <div class="swiper-button-prev" slot="button-prev"></div>
    </swiper>

可以看到源码中提供了一个插槽和几个具名插槽。

没有指定插槽名的<swiper-slide class="swiper-item"><img src="..jpg" alt="..."></swiper-slide> 会插入普通插槽中。

而swiper-pagination、swper-button-next、swiper-button-prev则是自定义配置，用户需要哪个就用哪个，会插入到相应的插槽中。

 

作用域插槽 ：多级嵌套组件中的应用

假设有下面这样的一个需求，点击某个商品commodity的时候，触发一个方法。

单一的实现需求很简单，写好三个组件 shop.vue，commodityList.vue，commodity.vue ，给commodity组件单独加上点击事件，根据需求嵌套调用。

这样可以满足功能，但并不优雅，也并不符合组件化的开发思路。我们希望commodity就只是一个简单的组件，不涉及点击事件等等业务逻辑，那么我们可能会这么做：使用emit将点击事件一层一层上传，一直传到shop，在shop中处理，这也是一种方法，但依然不够优雅，下面使用作用域插槽来实现一下。

先看commodity.vue

<!--commodity.vue !-->
<template>
  <div>
    <p>每个commodity的公共头部</p>
    <div class="box">
      <p>{{item.name}}</p>
      <p>{{item.price}}</p>
    </div>
  </div>
</template>

<script>
    export default {
        name: "commodity",
        props:['item']
    }
</script>

对于一个购商品卡片来说，我希望在这个组件中只关心他的样式和数据。样式当然是可以自定义的，而数据就需要从父组件中传来，因此用props接收。这样商品卡片组件就从业务逻辑中抽离出来了。 

再往上一层，看commodityList.vue

<template>
  <div>
    <div v-for="item in commoditylist">
        <slot :item="item"></slot>
    </div>
  </div>
</template>

<script>
    export default {
        name: "commodityList",
        props:['commoditylist']
    }
</script>

 同样用props从父组件(shop.vue)中获取所有数据（一个数组），然后写成一个循环，循环将每一项数据传回到shop中。这样有一个最大的好处就是，循环是在commodityList中执行的，这也是这个组件该有的功能。

最后看最外层的shop

<template>
  <div class="shop">
      <commodity-list :commoditylist="commoditylist">
        <template slot-scope="scope">
          <commodity :item="scope.item" @click.native="handleShop"></commodity>
        </template>
      </commodity-list>
  </div>
</template>

<script>
    import commodityList from './commodityList'
    import commodity from './commodity'
    export default {
      name: "shop",
      components:{
        commodityList,
        commodity
      },
      data(){
        return{
          commoditylist:[
            {
              name:'book1',
              price:20
            },
            {
              name:'book2',
              price:22
            }
          ]
        }
      },
      methods:{
        handleShop(){
          console.log('买了')
        }
      }
    }
</script>

shop把整个商品数据传给子组件commodityList, commodityList中执行循环，把单个商品数据逐个传回给shop(用scope接收)，然后把一个商品卡片组件放入插槽中插回commodityList中。

这样使用作用域插槽的好处：每个组件都负责相应的功能

1. shop负责展示commodityList和commodity，并处理相应的业务逻辑(点击事件)。
2. commodityList就负责一个循环。
3. commodity 拿到数据，只负责数据的渲染，也可以添加一些公共的部分。

---

总结：

1. 普通插槽/具名插槽：在父组件中向子组件插入一些元素，可以在子组件中定义插槽，规定哪些地方能被插入，可用于组件的自定义拓展。
2. 作用域插槽：经常在多级嵌套组件中应用