深入理解vue中的?slot-scope=“scope“
理解vue的 slot-scope=“scope“
slot是插槽，slot-scope=“scope“語義更加明確，相當于一行的數(shù)據(jù)，在實際開發(fā)中會碰到如下的場景，
這個工作狀態(tài)是變化的，而我們就可以通過后端返回的具體值來判斷這里應該顯示什么樣的內(nèi)容
具體代碼如下：
<el-table-column label="工單狀態(tài)" prop="status">
<template slot-scope="scope">
<span style="margin-left: 10px">{{
scope.row.status == "0"
? "待辦"
: scope.row.status == "1"
? "處置中"
: "完成"
}}</span>
</template>
</el-table-column>后端返回消息如下
status狀態(tài)值為0就是代辦，為1就是處置，為2就是完成
此外這里每行還有編輯，刪除等功能，事件處理函數(shù)中的參數(shù)，scope.$index就是該行的下標，scope.row就是該行的數(shù)據(jù)所有消息對象，有了這兩個參數(shù)我們就可以實現(xiàn)編輯（分配，轉(zhuǎn)派，完工），刪除功能，所以這個 slot-scope="scope"是非常重要的
vue中的slot和slot-scope使用
slot是vue中的插槽，它包括匿名插槽（沒name屬性）和具名插槽（有name屬性）
插槽的作用
slot的作用是，讓父組件中引用子組件時，包含的內(nèi)容不被子組件的內(nèi)容替代，其在父組件中包含的內(nèi)容，在子組件中就用slot代替，slot所在的位置就是父組件內(nèi)容想要顯示的區(qū)域。如下圖所示：
父組件：
子組件：
最后結(jié)果如下所示：
具名插槽
具名插槽的作用就是給子組件待填充的內(nèi)容取一個特定的標識，方便知道要插入的是哪段內(nèi)容
如下圖所示：
父組件：
子組件：
結(jié)果：
作用域插槽
slot-scope的作用就是讓父組件可以使用子組件data里面的數(shù)據(jù)，使用情況如下：
父組件：
子組件：
結(jié)果如下：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue?scss后綴文件background-image路徑錯誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在現(xiàn)代前端開發(fā)中,項目通常需要在不同的環(huán)境中運行,例如開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境,每個環(huán)境可能需要不同的配置,通過使用?.env?文件,可以方便地管理這些環(huán)境變量,避免硬編碼配置,本文給大家介紹了Vue3項目中env文件的配置指南,需要的朋友可以參考下2025-03-03
一文詳解Vue3組件通信輕松玩轉(zhuǎn)復雜數(shù)據(jù)流
在大型Vue項目中,組件通信如同神經(jīng)網(wǎng)絡般貫穿整個應用,這篇文章將為大家詳細介紹一下Vue3中的組件通信方式,有需要的小伙伴可以了解下2025-02-02
這篇文章主要為大家詳細介紹了Vue3編寫氣泡對話框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法
今天小編就為大家分享一篇vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
AT-UI 是一款基于 Vue.js 2.0 的輕量級、模塊化前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品。下面通過本文給大家介紹Vue 2.0的模塊化前端 UI 組件庫，需要的朋友參考下吧2017-12-12
Vue2.4+新增屬性.sync、$attrs、$listeners的具體使用
這篇文章主要介紹了Vue2.4+新增屬性.sync、$attrs、$listeners的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
優(yōu)雅的elementUI table單元格可編輯實現(xiàn)方法詳解
這篇文章主要介紹了優(yōu)雅的elementUI table單元格可編輯實現(xiàn)方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue自動路由-單頁面項目（非build時構(gòu)建）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04