我們知道在 Vue 中，style可以用兩種方式來導(dǎo)入：

// method1

@import ('./a.css');

//method2

復(fù)制代碼

但是不管哪一種，導(dǎo)進(jìn)的css文件都是應(yīng)用于全局的，有時(shí)候我們不想要這樣的效果。而要使得css只對當(dāng)前的組件有效，即局部應(yīng)用。vue中提供了scoped屬性，可以很好地解決該問題。

當(dāng)我們有如下應(yīng)用場景時(shí)，新的問題又出現(xiàn)了：

export default {

data () {

return {

}

},

props: {

mhtml: String

}

}

// some stylesheets to imploy to v-html

復(fù)制代碼

該組件中的style如果設(shè)置為scoped，那么style不會應(yīng)用到 v-html中，如果不設(shè)置為scoped，那么會污染全局變量，導(dǎo)致不可知的后果。

如何fix呢？官網(wǎng)給出了兩個(gè)解決辦法：

In single-file components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue’s template compiler. If you want to target v-html content with scoped CSS, you can instead use CSS modules or an additional, global

對于方法一，css module是一個(gè)解決全局變量和代碼依賴的規(guī)范，原理是對聲明了module的樣式表中的樣式賦予哈希class名， 可以參考 官網(wǎng)以及阮一峰老師的文章

對于方法二，意思是在全局變量中，通過特殊的命名(比如說BEM)來手動約束樣式顯示

可惜，以上都不是我想要的解決方案

在Stack Overflow中找到了第三種解：

可以使用 deep scoped 來實(shí)現(xiàn)對v-html的樣式應(yīng)用，并且不設(shè)置為全局

代碼如下：

export default {

data () {

return {

}

},

props: {

mhtml: String

}

}

.markDiv>>>h1,h2,h3,h4,h5,h6{

font-family: "PT Sans","SF UI Display", ".PingFang SC","PingFang SC", "Neue Haas Grotesk Text Pro", "Arial Nova", "Segoe UI", "Microsoft YaHei", "Microsoft JhengHei", "Helvetica Neue", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "Hiragino Sans GB", sans-serif;

text-rendering:optimizelegibility;margin-bottom:1em;font-weight:bold; line-height: 1.8rem;

}

復(fù)制代碼

這樣一來， 這些樣式就會影響該組件的子組件，其中的v-html自然也會因之而改變，但又不會『污染』全局，很好地fix我們的問題。

那么，原理是什么呢？

我們在vue-loader的release說明 中，發(fā)現(xiàn)從v12.2.0開始，加了這么一個(gè)特性：

總結(jié)

以上是生活随笔為你收集整理的vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。