淺談關于.vue文件中的style的scoped屬性
注意：scoped作用：使得.vue中的樣式不影響其他.vue組件樣式，而不是scoped使得.vue組件樣式不受外樣式影響。
1、在vue組件中，為了使樣式私有化（模塊化），不對全局造成污染，在style標簽上添加scoped屬性，以表示它只屬于當下的模塊。但是要慎用，因為在我們需要修改公共組件（第三方庫或者項目中定制的組件）的樣式的時候，scoped會造成很多困難，組要增加額外的復雜度。
一、創建公共組件button：
//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>
瀏覽器渲染后的button組件為:
<div data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
.button-warp[data-v-2311c06a]{
display:inline-block;
}
.button[data-v-2311c06a]{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
從上面的結果可以看出，添加了scoped屬性的組件，做了如下操作：
（1）、給HTML的DOM節點增加一個不重復的data屬性。（如：data-v-2311c06a）
（2）、在每句css選擇器的末尾（編譯后生成的css語句）加一個當前組件的data屬性選擇器(如：data-v-2311c06a)來私有化樣式。
二、在 " 不使用 " scoped的組件中引用button組件：
//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>
瀏覽器渲染出來的結果是：
<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>
/*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-radius屬性，但是由于權重關系，生效的依然是組件內部的樣式（即.button[data-v-2311c06a]定義的樣式）， 如果此時仍需修改樣式，則鼻血加重我們需要修改的樣式的權重。
三、在 " 使用 " scoped的組件中引用button組件：
//content.vue
<template>
<div class="content">
<p class="title"></p>
<!-- v-button假設是上面定義的公共組件 -->
<v-button></v-button>
</div>
</template>
...
<style scoped>
.content{
width: 1200px;
margin: 0 auto;
}
.content .button{
border-raduis: 5px;
}
</style>
瀏覽器渲染的結果是：
<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;
}
雖然，我們在content添加了scoped屬性，但是.content .button 這句末尾添加的是content的scoped標記，最后我們實際上是找不到向對應的DOM節點的，也就不起作用啦。
解決辦法：
在content.vue文件中添加兩個style樣式：
//content.vue
<template>
<div class="content">
<p class="title"></p>
<!-- v-button假設是上面定義的組件 -->
<v-button></v-button>
</div>
</template>
...
<style scoped>
//針對content組件內部的樣式
.content{
width: 1200px;
margin: 0 auto;
}
</style>
<style>
//針對公共組件的樣式
.content .button{
border-raduis: 5px !important;
}
</style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
