欣迪

最近寫 vue 發現 :v-deep 已經棄用一段時間。實在太久沒更新資訊,看到 Stackoverflow 上面的解答,先整理下來吧!

出處: css – How do I use /deep/ or >>> or ::v-deep in Vue.js? – Stack Overflow

Vue 2.0 – 2.6

/* sass 能用 */
::v-deep .child-class {
    background-color: #000;
}

/* sass 不能用 */
>>> .child-class {
    background-color: #000;
}

Vue 3 (and Vue 2.7)

:deep(.child-class) {
    background-color: #000;
}

Vue 3 的新功能

/* 可以用在 slot 裡面的內容 */
:slotted(.slot-class) {
    background-color: #000;
}

/* 設置為全域 css */
:global(.my-class) {
    background-color: #000;
}

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。