slot基本使用

在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。
我们通过一个简单的例子，来给子组件定义一个插槽：
<slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容
有了这个插槽后，父组件如何使用呢？

slot1.png

具名插槽slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
这个时候，我们就需要给插槽起一个名字
如何使用具名插槽呢？
非常简单，只要给slot元素一个name属性即可
<slot name='myslot'></slot>
我们来给出一个案例：

slot2.png

作用域插槽：

我们先提一个需求：
子组件中包括一组数据，比如：pLanguages: [‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’, ‘C++’]
需要在多个界面进行展示：
某些界面是以水平方向一一展示的，
某些界面是以列表形式展示的，
某些界面直接展示一个数组
内容在子组件，希望父组件告诉我们如何展示，怎么办呢？
利用slot作用域插槽就可以了
我们来看看子组件的定义：

slot3.png

作用域插槽：使用
在父组件使用我们的子组件时，从子组件中拿到数据：
我们通过<template slot-scope="slotProps">获取到slotProps属性
在通过slotProps.data就可以获取到刚才我们传入的data了

slot4.png

v-slot

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。---vue.js官网

v-slot具名插槽使用

子组件中

      <slot name="left">我是一个插槽默认内容</slot>
      <slot name="center">我是二个插槽默认内容</slot>
      <slot name="right">我是三个插槽默认内容</slot>
      <slot>我是四个插槽默认内容</slot>

父组件使用
插槽的名字现在通过 v-slot:slotName 这种形式来使用

          <template v-slot:left>
              <p>111</p>
           </template>
           <template v-slot:center>
              <p>222</p>
           </template>
           <template v-slot:right>
            <p>333</p>
           </template>
           <template>
            <p>444</p>
           </template>

注意

没有名字的 <slot> 隐含有一个 "default" 名称
v-slot 只能添加到 <template> 或自定义组件上，这点与弃用的 slot 属性不同

v-slot作用域插槽

子组件

       <slot name="left">我是一个插槽默认内容</slot>
        <slot name="center">我是二个插槽默认内容</slot>
        <slot name="right" :data="sss">我是三个插槽默认内容  </slot>
        <slot>我是四个插槽默认内容</slot>
 <script>
export default {
    data () {
        return {
            sss:['111','222','333','444']
        }
    }
    
}
</script>

父组件使用

 <template v-slot:left>
              <p>111</p>
           </template>
           <template v-slot:center>
              <p>222</p>
           </template>
           <template v-slot:right="data1">
             <ul>
                 <li v-for="(item,index) in  data1.data " :key="index">
                    {{item}}
                 </li>
             </ul>
           </template>
           <template>
            <p>444</p>
           </template>

效果展示

slot5.png