一、什么是插槽唐断？
插槽就是子組件中选脊，提供給父組件使用的一個(gè)占位符，用
<slot></slot>表示脸甘，父組件可以在這個(gè)占位符中填充任何模塊代碼恳啥，如HTML、組件等丹诀，填充的內(nèi)容會(huì)替換子組件中的<slot></slot>標(biāo)簽
-
子組件中設(shè)置了一個(gè)占位符
<slot></slot>
-
父組件中使用子組件內(nèi)部去填充任何內(nèi)容钝的，都能將內(nèi)容替換掉成子組件中的占位符
加上v-slot:default表示為默認(rèn)插槽
-
效果
二翁垂、具名插槽
1. 具名插槽其實(shí)就是給插槽取了個(gè)名字
2. 一個(gè)子組件可以放多個(gè)插槽，而且可以放不同的地方硝桩，而父組件填充內(nèi)容的時(shí)候沿猜，可以根據(jù)這個(gè)名字把內(nèi)容填充到對(duì)應(yīng)的插槽中
-
子組件中設(shè)置兩個(gè)
slot占位符，并用name屬性取上head和foot的插槽名字
-
父組件中是用
template標(biāo)簽包裹兩個(gè)標(biāo)簽碗脊，并用v-slot: 名字綁定兩個(gè)插槽
-
效果
注意：在父組件中啼肩，無論綁定插槽的順序如何，模塊顯示的順序都是按照子組件中望薄，插槽的順序顯示的
三疟游、默認(rèn)插槽
默認(rèn)插槽就是指沒有名字的插槽，子組件未定義的名字的插槽痕支，父級(jí)將會(huì)把 未指定插槽的填充的內(nèi)容填充到默認(rèn)插槽中。
-
子組件中直接定義插槽蛮原，沒有名字
-
父組件中
v-slot:default表示默認(rèn)插槽
-
效果
四卧须、作用域插槽
1. 作用域插槽其實(shí)就是帶數(shù)據(jù)的插槽，即帶參數(shù)的插槽
2. 父組件可根據(jù)子組件傳過來的插槽數(shù)據(jù)來進(jìn)行不同的方式展現(xiàn)和填充插槽內(nèi)容
-
在子組件
Listitem.vue中去定義一個(gè)具名插槽儒陨，然后將需要傳入的值綁定在一個(gè)屬性上花嘶，這里是content
-
在父組件
List.vue中去綁定具名插槽，并給這個(gè)插槽設(shè)置一個(gè)名字titleSlot蹦漠，獲取子組件傳過來的參數(shù)時(shí)椭员，用titleSlot.content獲取當(dāng)前傳過來的內(nèi)容
-
效果
五、在vue表格組件中中去獲取當(dāng)前行
業(yè)務(wù)場(chǎng)景
在vue項(xiàng)目中笛园，使用
elementui中的表格組件el-table和el-table-column去顯示表格數(shù)據(jù)的時(shí)候隘击，每一行都會(huì)有一個(gè)編輯和刪除按鈕，但是在點(diǎn)擊按鈕的時(shí)候如何確認(rèn)點(diǎn)擊的是否是當(dāng)前需要?jiǎng)h除或修改的行呢研铆，這里也用到了v-solt埋同，下面詳細(xì)的舉個(gè)例子
通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù)
1) 在el-table-column標(biāo)簽下去用templete標(biāo)簽，在templete標(biāo)簽中去綁定一個(gè)v-slot="scope"
2) 定義按鈕棵红，在按鈕上設(shè)置單擊事件凶赁，點(diǎn)擊事件傳參數(shù)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) 在點(diǎn)擊事件的方法中去接收一個(gè)參數(shù)row，這個(gè)row就是當(dāng)前行的信息
handleUpdate(row) {
console.log("當(dāng)前行row>>>", row);
},
-
打印結(jié)果
4) 完整代碼
<el-table-column label="操作" width="160px">
<!-- 通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù) -->
<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>
// 編輯一條數(shù)據(jù)的方法
handleUpdate(row) {
console.log("當(dāng)前行row>>>", row);
},
// 刪除一條數(shù)據(jù)的方法
handleDelete(index, row) {
// JSON.stringify() 將json對(duì)象轉(zhuǎn)換成字符串
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) {
// 刪除成功后虱肄，重新過請(qǐng)求一次列表數(shù)據(jù)
this.onRequestUserList(this.currentNo, this.pageSize);
this.$message({
type: "success",
message: "刪除成功!"
});
}
})
.catch(err => {
console.log(err);
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消刪除!"
});
});
},
