亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

理解vue的 slot-scope=“scope“

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

這個(gè)工作狀態(tài)是變化的，而我們就可以通過(guò)后端返回的具體值來(lá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ù)所有消息對(duì)象，有了這兩個(gè)參數(shù)我們就可以實(shí)現(xiàn)編輯（分配，轉(zhuǎn)派，完工），刪除功能，所以這個(gè) slot-scope="scope"是非常重要的

vue中的slot和slot-scope使用

slot是vue中的插槽，它包括匿名插槽（沒(méi)name屬性）和具名插槽（有name屬性）

插槽的作用

slot的作用是，讓父組件中引用子組件時(shí)，包含的內(nèi)容不被子組件的內(nèi)容替代，其在父組件中包含的內(nèi)容，在子組件中就用slot代替，slot所在的位置就是父組件內(nèi)容想要顯示的區(qū)域。如下圖所示：

父組件：

子組件：

最后結(jié)果如下所示：

具名插槽 

具名插槽的作用就是給子組件待填充的內(nèi)容取一個(gè)特定的標(biāo)識(shí)，方便知道要插入的是哪段內(nèi)容

如下圖所示：

父組件：

子組件：

 結(jié)果：

作用域插槽

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

父組件：

 子組件：

 結(jié)果如下：

總結(jié)

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

相關(guān)文章

最新評(píng)論