scoped是乙個極其常用的scoped後，渲染時這個元件所有元素都會加上data-v-***xx這樣的屬性。vue 使用者應該經常會在除錯的時候見到類似這樣的結構：
.money[data-v-9bfd234a]
9bfd234a標誌，但是當然，如果子元件本身也用了 scoped，當然會有另乙個data-v-標籤，不過隨機生成的 id 是不同的，所以不會互相干擾。
總有那麼一些情況，你需要修改外部引入的子元件的樣式來配合自己的頁面。
如果你用了scoped，你所寫的所有樣式都會被限制在data-v-屬性選擇器中。
要解決這個最簡單的是：不要使用scoped。
實際上你要做到scoped這種「自治」的效果，只要在模板最外層加乙個 id，然後所有樣式都寫在這個 id 之下就好了。不過這依賴 css 預處理器，不然寫起來會很麻煩。
scoped，可以選擇使用/deep/（關於>>>，直接使用 css 也可以用，不過一些 css 預處理器無法處理>>>）。
繼續使用上面的例子，如果父元件希望改變childclass的樣式，可以這麼寫：
[data-v-9bfd234a] .childclass/deep/幹了什麼，「穿透了」父子元件。其實並不是，在scoped的前提下/deep/做的是減法，而不是加法。
換句話說/deep/的效果就是讓 deep 後面的選擇器不被加上data-v-選擇器。
關於scoped的重點就這麼多，文比較短，本來打算記著就算了，但是覺得寫出來思路會更清晰，也方便以後忘了可以檢視。
本篇文章由一文多發平台artipub自動發布
vue單檔案中scoped樣式如何穿透？
在vue檔案中的style標籤上，有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時，它的css樣式就只能作用於當前的元件，也就是說，該樣式只能適用於當前元件元素。通過該屬性，可以使得元件之間的樣式不互相汙染。如果乙個專案中的所有style標籤全部加上了scoped，相當於實...
Vue 元件間的樣式處理 scoped
關於 vue 元件間的樣式問題，一直困擾我。父與子，子與父，兄弟元件間相互的樣式汙染，再加上 scoped 作用域的作用，導致我們很難搞清楚之間的相互關係，今天我們就來一 竟 父元件 子元件 通過現象可以看到，父元件的樣式覆蓋了子元件的樣式 但是為什麼會這樣呢？按照我的理解，每個 vue 元件都有自...
vue 樣式加scoped不起作用
出現環境 在vue元件中使用了scoped，發現手寫的標籤樣式起作用，但是第三方的元件標籤並沒有起作用 原因 1.先搞清楚scoped的布局實現 在style上加上scoped後 會對 style裡面加了樣式的標籤 每個加上乙個 像這樣的乙個屬性 data v 4686dc05 元件內的樣式只會對帶...