欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入理解vue中的?slot-scope=“scope“

 更新時間：2022年12月09日 09:12:35   作者：多看書少吃飯  
這篇文章主要介紹了理解vue中的?slot-scope=“scope“，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

理解vue的 slot-scope=“scope“

slot是插槽，slot-scope=“scope“語義更加明確，相當(dāng)于一行的數(shù)據(jù)，在實際開發(fā)中會碰到如下的場景，

這個工作狀態(tài)是變化的，而我們就可以通過后端返回的具體值來判斷這里應(yīng)該顯示什么樣的內(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就是該行的下標(biāo)，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)容取一個特定的標(biāo)識，方便知道要插入的是哪段內(nèi)容

如下圖所示：

父組件：

子組件：

 結(jié)果：

作用域插槽

slot-scope的作用就是讓父組件可以使用子組件data里面的數(shù)據(jù)，使用情況如下：

父組件：

 子組件：

 結(jié)果如下：

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論