vue中style的scoped屬性這里是怎實現的呢？

scoped三條渲染規則

給HTML的DOM節點加一個不重復data屬性(形如：data-v-2311c06a)來表示他的唯一性

在每句css選擇器的末尾（編譯后的生成的css語句）加一個當前組件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式

如果組件內部包含有其他組件，只會給其他組件的最外層標簽加上當前組件的data屬性

---

一個簡單組件例子：

//button.vue <template><div class="button-warp"><button class="button">text</button></div> </template> ... <style scoped>.button-warp{display:inline-block;}.button{padding: 5px 10px;font-size: 12px;border-radus: 2px;} </style>

瀏覽器渲染組件

HTML

<div data-v-2311c06a class="button-warp"><button data-v-2311c06a class="button">text</button> </div>

CSS

.button-warp[data-v-2311c06a]{display:inline-block; } .button[data-v-2311c06a]{padding: 5px 10px;font-size: 12px;border-radus: 2px; }

從上面的字可以看出，添加了scoped屬性的組件，為了達到組件樣式模塊化，做了兩個處理：

• 給HTML的DOM節點加一個不重復data屬性(形如：data-v-2311c06a)來表示他的唯一性
• 在每句css選擇器的末尾（編譯后的生成的css語句）加一個當前組件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式

大家都知道css樣式有一個優先級的說法，scoped的這一操作，雖然達到了組件樣式模塊化的目的，但是會造成一種后果：每個樣式的權重加重了：理論上我們要去修改這個樣式，需要更高的權重去覆蓋這個樣式。這是增加復雜度的其中一個維度。

---

其他組件引用button組件

上面分析了單個組件渲染后的結果,那么組件互相調用之后會出現什么樣的結果呢？，具體分兩種情況：模塊一般組件引用模塊私有組件（本質和模塊私有組件引用模塊一般組件一樣）；模塊私有組件引用模塊私有組件。

舉個例子：在組件content.vue中使用了button組件，那么content.vue組件是否添加scoped屬性渲染出來的結果有什么區別呢？

//content.vue <template><div class="content"><p class="title"></p><!-- v-button假設是上面定義的組件 --><v-button></v-button></div> </template> ... <style>.content{width: 1200px;margin: 0 auto;}.content .button{border-raduis: 5px;} </style>

---

模塊一般組件（未添加scoped）引用模塊私有組件(渲染后)

如果style上沒有加scoped屬性，那么渲染出來html和css分別就是：
HTML

<div class="content"><p class="title"></p><!-- v-button假設是上面定義的組件 --><div data-v-2311c06a class="button-warp"><button data-v-2311c06a class="button">text</button></div> </div>

CSS

/*button.vue渲染出來的css*/ .button-warp[data-v-2311c06a]{display:inline-block; } .button[data-v-2311c06a]{padding: 5px 10px;font-size: 12px;border-radus: 2px; } /*content.vue渲染出來的css*/ .content{width: 1200px;margin: 0 auto; } .content .button{border-raduis: 5px; }

可以看出，雖然在content組件中，修改了button的border-raduis屬性，但是由于權重關系，生效的依然是組件內部的樣式（此時是外部的樣式被覆蓋）。所以如果要達到修改樣式的目的，就必須加重我們要修改樣式的權重（增加選擇器層級，ID選擇器，并列選擇器，impotant等）

---

模塊私有組件（添加scoped）引用模塊私有組件

如果加了scoped屬性呢？按照開始分析出來的規則（事實也是這么的）：
首先是在所有的DOM節點加上data屬性
然后在css選擇器尾部加上data屬性選擇器

那么渲染出來html和css分別就是：

<div data-v-57bc25a0 class="content"><p data-v-57bc25a0 class="title"></p><!-- v-button假設是上面定義的組件 --><div data-v-57bc25a0 data-v-2311c06a class="button-warp"><button data-v-2311c06a class="button">text</button></div> </div> /*button.vue渲染出來的css*/ .button-warp[data-v-2311c06a]{display:inline-block; } .button[data-v-2311c06a]{padding: 5px 10px;font-size: 12px;border-radus: 2px; } /*content.vue渲染出來的css*/ .content[data-v-57bc25a0]{width: 1200px;margin: 0 auto; } .content .button[data-v-57bc25a0]{border-raduis: 5px; }

原文鏈接：https://segmentfault.com/a/1190000012184604?utm_source=tuicool&utm_medium=referral

總結

以上是生活随笔為你收集整理的vue中style的scoped属性的设计方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。