.vue文件加scoped樣式不起作用的解決方法

淺談關(guān)于.vue文件中的style的scoped屬性

創(chuàng)新互聯(lián)公司自2013年起，先為米易等服務(wù)建站，米易等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為米易企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

注意：scoped作用：使得.vue中的樣式不影響其他.vue組件樣式，而不是scoped使得.vue組件樣式不受外樣式影響。

1、在vue組件中，為了使樣式私有化（模塊化），不對全局造成污染，在style標(biāo)簽上添加scoped屬性，以表示它只屬于當(dāng)下的模塊。但是要慎用，因?yàn)樵谖覀冃枰薷墓步M件（第三方庫或者項(xiàng)目中定制的組件）的樣式的時(shí)候，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)增加一個(gè)不重復(fù)的data屬性。（如：data-v-2311c06a）
（2）、在每句css選擇器的末尾（編譯后生成的css語句）加一個(gè)當(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]定義的樣式），如果此時(shí)仍需修改樣式，則鼻血加重我們需要修改的樣式的權(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文件中添加兩個(gè)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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：.vue文件加scoped樣式不起作用的解決方法
URL鏈接：http://aaarwkj.com/article32/gjippc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、營銷型網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站排名、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

.vue文件加scoped樣式不起作用的解決方法