2020.10.27陈悦玲

插槽

什么是插槽slot？

1. 插槽（slot）是vue提出来的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显示不显示、怎样显示都是由父组件进行控制的，而插槽在哪里显示就由子组件来进行控制

2. 分类

   1. 默认插槽
      提示：通过slot在子组件中为将要设置的内容占位，在父组件中调用子组件的时候，在子组件的内容，向子组件传递slot占位的内容，slot所在的位置就是父组件要显示的内容

          //父组件：
              <div id ="#app">
      
                  <子组件>
      
                      <p>我的世界</p>
      
                  </子组件>
      
              </div>
      
          //子组件
      
              <子组件>
      
                  <slot></slot>
      
              </子组件>
      

   2. 插槽的默认内容

   3. 具名插槽
      <slot name ="插槽的名字"></slot>
      提示：默认插槽在传递多个信息的时候已经不能满足用户的需求，于是，通过name属性，我们可以为每个slot起一个名字，通过名字来传递我们想要传递的内容，若没有设置名字，则传递默认插槽的值

              //父组件：
                          <div id ="#app">
      
                              <子组件>
      
                                  <p slot="name1">传输内容1</p> //slot与下面的相互对应
      
                                  <p slot="name2">传输内容2</p>
      
                              </子组件>
      
                          </div>
      
              //子组件
      
                          <子组件>
      
                              <slot name=“name1“></slot>
      
                              <slot name=“name2“></slot>
      
                          </子组件>
      

   1. 作用域插槽
      slot-scope:父组件可以获取子组件中携带的数据

      //父组件：
              <div id ="#app">
      
                  <子组件>
      
                      <template slot-scope="接收子组件传递过来的数据的变量名">
      
                          <p>{{变量名}}</p>
      
                      </template>
      
                  </子组件>
      
              </div>
      
      //子组件
      
                  <子组件>
      
                      <slot :传递给父组件的变量名=“变量名”></slot>
      
                  </子组件>
      

      1. v-slot
         提示：在vue2.6版本开始，使用v-slot 代替 slot 和 slot-scope ，slot 和 slot-scope已经废弃，暂时仍旧可以使用（vue3的语法 就用v-slot）

         //父组件：
             <div id ="#app">
         
                 <子组件>
         
                     <template v-slot=“传递的名字”>
         
                         //slot 的传递内容
         
                         {{传递的名字}}
         
                     </template>
         
                 </子组件>
         
             </div>
         
         //子组件
         
                 <子组件>
         
                     <slot name="传递的名字"></slot>
         
                 </子组件>