一、什么是插槽？

插槽就是子組件中，提供給父組件使用的一個占位符，用<slot></slot>表示，父組件可以在這個占位符中填充任何模塊代碼，如HTML、組件等，填充的內容會替換子組件中的<slot></slot>標簽

• 子組件中設置了一個占位符<slot></slot>
  

• 父組件中使用子組件內部去填充任何內容，都能將內容替換掉成子組件中的占位符
  加上v-slot:default表示為默認插槽
  

• 效果

  
  

二、具名插槽

1. 具名插槽其實就是給插槽取了個名字

2. 一個子組件可以放多個插槽，而且可以放不同的地方，而父組件填充內容的時候，可以根據這個名字把內容填充到對應的插槽中

• 子組件中設置兩個slot占位符，并用name屬性取上head和foot的插槽名字
  

• 父組件中是用template標簽包裹兩個標簽，并用v-slot: 名字綁定兩個插槽
  

• 效果

  
  

注意：在父組件中，無論綁定插槽的順序如何，模塊顯示的順序都是按照子組件中，插槽的順序顯示的

三、默認插槽

默認插槽就是指沒有名字的插槽，子組件未定義的名字的插槽，父級將會把 未指定插槽的填充的內容填充到默認插槽中。

• 子組件中直接定義插槽，沒有名字

  
  

• 父組件中v-slot:default表示默認插槽
  

• 效果

  
  

四、作用域插槽

1. 作用域插槽其實就是帶數據的插槽，即帶參數的插槽

2. 父組件可根據子組件傳過來的插槽數據來進行不同的方式展現和填充插槽內容

• 在子組件Listitem.vue中去定義一個具名插槽，然后將需要傳入的值綁定在一個屬性上，這里是content
  

• 在父組件List.vue中去綁定具名插槽，并給這個插槽設置一個名字titleSlot，獲取子組件傳過來的參數時，用titleSlot.content獲取當前傳過來的內容
  

• 效果

  
  

五、在vue表格組件中中去獲取當前行

業務場景

在vue項目中，使用elementui中的表格組件el-table和el-table-column去顯示表格數據的時候，每一行都會有一個編輯和刪除按鈕，但是在點擊按鈕的時候如何確認點擊的是否是當前需要刪除或修改的行呢，這里也用到了v-solt，下面詳細的舉個例子

通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內部的狀態管理）的數據

1) 在el-table-column標簽下去用templete標簽，在templete標簽中去綁定一個v-slot="scope"

2) 定義按鈕，在按鈕上設置單擊事件，點擊事件傳參數scope.row

<el-button size="mini" @click="handleUpdate(scope.row)">編輯</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>

3) 在點擊事件的方法中去接收一個參數row，這個row就是當前行的信息

handleUpdate(row) {
  console.log("當前行row>>>", row);
},

• 打印結果

  
  

4) 完整代碼

  <el-table-column label="操作" width="160px">
    <!-- 通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內部的狀態管理）的數據 -->
    <template v-slot="scope">
      <el-button size="mini" @click="handleUpdate(scope.row)">編輯</el-button>
      <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
    </template>
  </el-table-column>

// 編輯一條數據的方法
handleUpdate(row) {
  console.log("當前行row>>>", row);
},
// 刪除一條數據的方法
handleDelete(index, row) {
  // JSON.stringify() 將json對象轉換成字符串
  console.log(`index : ${index}, row : ${JSON.stringify(row)}`);
  const uid = row.uid;
  console.log("uid>>", uid);
  // 提示框
  this.$confirm("是否刪除這條記錄？", "提示", {
    confirmButtonText: "確定",
    cancelButtonText: "取消",
    type: "warning" // 彈框類型為警告
  })
    .then(() => {
      RequestUserDelete(uid)
        .then(res => {
          if (res.resultCode === 1) {
            // 刪除成功后，重新過請求一次列表數據
            this.onRequestUserList(this.currentNo, this.pageSize);
            this.$message({
              type: "success",
              message: "刪除成功!"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    })
    .catch(() => {
      this.$message({
        type: "info",
        message: "取消刪除!"
      });
    });
},