淺談關(guān)于.vue文件中的style的scoped屬性
注意：scoped作用：使得.vue中的樣式不影響其他.vue組件樣式，而不是scoped使得.vue組件樣式不受外樣式影響。
1、在vue組件中，為了使樣式私有化（模塊化），不對全局造成污染，在style標(biāo)簽上添加scoped屬性，以表示它只屬于當(dāng)下的模塊。但是要慎用，因?yàn)樵谖覀冃枰薷墓步M件（第三方庫或者項(xiàng)目中定制的組件）的樣式的時候，scoped會造成很多困難，組要增加額外的復(fù)雜度。
一、創(chuàng)建公共組件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;}從上面的結(jié)果可以看出，添加了scoped屬性的組件，做了如下操作：
（1）、給HTML的DOM節(jié)點(diǎn)增加一個不重復(fù)的data屬性。（如：data-v-2311c06a）
（2）、在每句css選擇器的末尾（編譯后生成的css語句）加一個當(dāng)前組件的data屬性選擇器(如：data-v-2311c06a)來私有化樣式。
二、在 " 不使用 " scoped的組件中引用button組件：
//content.vue<template> <div class="content"> <p class="title"></p> <!-- v-button假設(shè)是上面定義的公共組件 --> <v-button></v-button> </div></template>...<style> .content{ width: 1200px; margin: 0 auto; } .content .button{ border-raduis: 5px; }</style>瀏覽器渲染出來的結(jié)果是：
<div class="content"> <p class="title"></p> <!-- v-button假設(shè)是上面定義的組件 --> <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屬性，但是由于權(quán)重關(guān)系，生效的依然是組件內(nèi)部的樣式（即.button[data-v-2311c06a]定義的樣式）， 如果此時仍需修改樣式，則鼻血加重我們需要修改的樣式的權(quán)重。
三、在 " 使用 " scoped的組件中引用button組件：
//content.vue<template> <div class="content"> <p class="title"></p> <!-- v-button假設(shè)是上面定義的公共組件 --> <v-button></v-button> </div></template>...<style scoped> .content{ width: 1200px; margin: 0 auto; } .content .button{ border-raduis: 5px; }</style>瀏覽器渲染的結(jié)果是：
<div data-v-57bc25a0 class="content"> <p data-v-57bc25a0 class="title"></p> <!-- v-button假設(shè)是上面定義的組件 --> <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標(biāo)記，最后我們實(shí)際上是找不到向?qū)?yīng)的DOM節(jié)點(diǎn)的，也就不起作用啦。
解決辦法：
在content.vue文件中添加兩個style樣式：
//content.vue<template> <div class="content"> <p class="title"></p> <!-- v-button假設(shè)是上面定義的組件 --> <v-button></v-button> </div></template>...<style scoped> //針對content組件內(nèi)部的樣式 .content{ width: 1200px; margin: 0 auto; }</style><style> //針對公共組件的樣式 .content .button{ border-raduis: 5px !important; }</style>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
