最近寫 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;
}
