因此，我查看了 stackoverflow 和 Vue 3 中的檔案，但找不到我要查找的內容。
我正在嘗試找到一種方法來定位一個命名槽，穿透該槽內的作用域元素，并覆寫它的一個子樣式。我假設我需要 ::slotted 選擇器和 :deep 選擇器來完成這個任務。有誰知道如何做到這一點？
這是我試圖解決的情況示例（LayoutContainer 組件）：
<section>
<slot name="text"></slot>
<slot></slot>
<slot name="sidebar"></slot>
</section>
將進入“文本”插槽的組件（眉毛組件）：
<section >
<h1>{{title}}</h1>
<h6>{{description"}}</h6>
</section>
頁面組件上代碼的完整視圖：
<LayoutContainer>
<template #text>
<Eyebrow :title='test' :description="this is a description"></Eyebrow>
</template>
<PageBody></PageBody>
<template #sidebar>
<PageSideBar></PageSideBar>
</template>
</LayoutContainer>
我在 SCSS 中嘗試過的解決方案沒有成功：
::slotted(h6) { color: red }
::slotted(text){
:deep(.eyebrow-container) {
h6 { color: red; }
}
}
::slotted(text) {
:deep(h6) { color: red; }
}
還有一些我現在忘記了。
有沒有人對如何從頁面組件的 SCSS 訪問 Eyebrow 組件內部的 h6 標簽有任何想法？
uj5u.com熱心網友回復：
插槽內容由傳入它們的父級擁有。
所以你不需要使用:slotted. 您可以簡單地使用:deep 選擇器
<style scoped>
:deep(h6) {
color: red;
}
</style>
現場觀看
如果您想知道如何使用，:slotted那么在您的情況下，它將用于LayoutContainer嘗試設定父組件傳入的樣式的組件。
如果您使用多根節點組件，則父組件的作用域樣式和樣式子組件不會像您想象的那樣作業。
因此，如果您使用多根節點組件并且:deep不起作用，請參閱我的其他答案
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432669.html
上一篇：如何將vue版本從3降級到2
下一篇：Vuejs如何提交陣列