3.vue知识点v-slot(插槽)

---

一、自定义组件中定义插槽

• 代码示例
  自定义组件<slot-box>，包含两个插槽，一个是默认插槽，一个是具名插槽

      <template>
          <div class="demo-alert-box">
          <span>
              <slot v-bind:user="user">{{user.lastname}}</slot>
          </span>
          <h3>
              <slot name="titleSlot" v-bind:user="user">{{user.lastname}}</slot>
          </h3>
          </div>
      </template>
  
      <script>
          export default {
              data(){
                  return{
                      user:{
                          firstname:'tony',
                          lastname:'tommars'
                      }
                  }
              }
          }
      </script>
  

二、具名插槽

1.说明

• 第一个slot的名字是隐含的，默认是default
• 第二个slot名字指定，在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
• 注：v-slot 通常情况下只能添加在 <template> 上

2.代码示例

• 应用自定义组件并设置插槽

      <h4 style="color:red">具名插槽</h4>
      <slot-box> 
          <template v-slot>
              <div>具名插槽(default)</div>
          </template>
          <template v-slot:titleSlot>
              <div>具名插槽(titleSlot)</div>
          </template>
      </slot-box>
  

3.效果

三、标准作用域插槽

1.Prop

• 使用场景
  
  • 本来自定义的组件<slot-box>内部定义好了默认内容，但是在外部定义slot处内容的时候又想改变显示内容，在外部使用组件时，不可以直接对组件内部定义的内容修改，需要通过Prop这个数据接口来进行数据的获取
  • 绑定在 <slot> 元素上的 attribute 被称为插槽 prop
  • 现在在父级作用域中，我们 可以使用带值的 v-slot 来定义我们提供的插槽 prop的名字(这个名字可以自己取)
• 代码示例

      <h4 style="color:red">标准作用域插槽</h4>
      <slot-box>
          <template v-slot:default="slotProps">
              firstName:{{slotProps.user.firstname}}
              <br>
              lastName:{{slotProps.user.lastname}}
          </template>
      </slot-box>
  

• 效果
  这样就可以使用内部的数据进行显示了（图中两行的是自定义的内容，一行的是slot中默认的内容）
  

2.v-slot缩写:#

• 代码示例

      <h4 style="color:red">标准作用域插槽,v-slot缩写</h4>
      <slot-box>
          <template #default="slotProps">
              firstName:{{slotProps.user.firstname}}
              <br>
              lastName:{{slotProps.user.lastname}}
          </template>
      </slot-box>
  

3.使用{}对传入slot的Prop解构、重命名

• 代码示例

      <h4 style="color:red">标准作用域插槽，v-slot缩写，解构插槽prop+重命名</h4>
      <slot-box>
          <template #default={user:body}>
              firstName:{{body.firstname}}
              <br>
              lastName:{{body.lastname}}
          </template>
      </slot-box>
  

• 效果
  
  （图中两行的是自定义的内容，一行的是slot中默认的内容）

四、独占默认插槽

• 说明
  当只有一个默认插槽时，才可以把v-slot直接作用于组件
• 代码示例

      <h4 style="color:red">独占默认插槽的写法(只有一个默认插槽)</h4>
      <slot-box v-slot:default="slotProps">
          firstName:{{slotProps.user.firstname}}
          <br>
          lastName:{{slotProps.user.lastname}}
      </slot-box>
  

• 效果
  
  （图中两行的是自定义的内容，一行的是slot中默认的内容）

五、多个插槽

• 说明
  当出现多个插槽时，所有的插槽定义都要 基于标准的 <template>语法(不可以把v-slot直接作用于组件)
• 代码示例

      <h4 style="color:red">当出现多个插槽时，需要使用标准的template</h4>
      <slot-box>
          <template v-slot:default="slotProps">
              firstName:{{slotProps.user.firstname}}
              <br>
              lastName:{{slotProps.user.lastname}}
          </template>
          <template v-slot:titleSlot="otherslotProps">
              firstName:{{otherslotProps.user.firstname}}
              <br>
              lastName:{{otherslotProps.user.lastname}}
          </template>
      </slot-box>
  

• 效果
  
  （图中两行的是自定义的内容，一行的是slot中默认的内容）

六、动态参数

• 说明
  使用[]，可以传入参数，动态的变化插槽名，达到动态使用不同插槽的效果

• 代码示例
  比如外部只定义了一个插槽内容，但是需要动态的将内容显示到不同插槽上，可以使用这个动态参数

      <h4 style="color:red">独占默认插槽的写法(只有一个插槽)</h4>
      <button @click="testDynamicParam">测试动态参数</button>
      <slot-box v-slot:[slotDynamicParam]="slotProps">
          firstName:{{slotProps.user.firstname}}
          <br>
          lastName:{{slotProps.user.lastname}}
      </slot-box>
  

      testDynamicParam(){
          if(this.slotparamChange){
              this.slotDynamicParam='titleSlot'
          }else{
              this.slotDynamicParam='default' 
          }
          this.slotparamChange=!this.slotparamChange
      },
  

• 效果

  • 点击按钮前的初始界面
    
  • 点击按钮后
    

  前者是将默认插槽进行了内容重新定义，命名的titleSlot插槽使用的默认内容，但是点击按钮后，变成了对命名的titleSlot插槽内容重新定义，默认插槽变成了默认内容