關(guān)于v-html

??在vue使用中，指令v-html渲染頁(yè)面經(jīng)常用到，類(lèi)似于jQuery的$('x').html()去渲染。通過(guò)指令v-html渲染出來(lái)的內(nèi)容還會(huì)帶有原來(lái)的標(biāo)簽及其樣式，如果需要修改或者重設(shè)其樣式，應(yīng)該如何去做嗎？

采坑

??首先，我在style中用子級(jí)選擇器去選中并修改樣式，經(jīng)過(guò)猛如虎的操作后，并沒(méi)生效。F12打開(kāi)Elements調(diào)試，發(fā)現(xiàn)在style里面樣式根本沒(méi)加載上去，沒(méi)有class中也沒(méi)有類(lèi)名出現(xiàn)。除此之外，渲染非該指令元素時(shí)，所有的類(lèi)名會(huì)跟有[data-v-xxxxxx]的東西。

爬坑

解決方案

現(xiàn)給出3中方案來(lái)解決此問(wèn)題：

• 去掉style中的scoped;
• watch監(jiān)測(cè)數(shù)據(jù)變化;
• 深度選擇器>>>

方案1實(shí)踐

去掉style中的scoped

??在vue組件中，我們寫(xiě)style時(shí)，為了防止頁(yè)面樣式?jīng)_突，在每個(gè)組件中會(huì)加上scoped屬性。經(jīng)測(cè)試，去掉該屬性即可渲染樣式成功。但是在組件過(guò)多或者項(xiàng)目中大時(shí)，經(jīng)常會(huì)出現(xiàn)頁(yè)面樣式?jīng)_突，因此該方法不建議使用。

方案2實(shí)踐

watch監(jiān)測(cè)數(shù)據(jù)變化

??在script > export default中,watch屬性可監(jiān)聽(tīng)v-html所綁定值的變化。如果是后臺(tái)請(qǐng)求的數(shù)據(jù)，那么可以在watch中監(jiān)聽(tīng)改數(shù)據(jù)變化，當(dāng)數(shù)據(jù)發(fā)生改變驅(qū)動(dòng)視圖后，動(dòng)態(tài)綁定一個(gè)class來(lái)改變子級(jí)元素樣式。此方法有一定局限性。

方案3實(shí)踐

深度選擇器 >>>

??此時(shí)，深度選擇器的應(yīng)用則脫穎而出。深度選擇器>>>，可深度改變子級(jí)樣式。例：

<template>
    <div class="test"></div>
</template>

<script>
// ***
</script>

<style scoped>
    .test >>> *{
        width: 100%;
    }
</style>

??如果使用scss或者less等css擴(kuò)展語(yǔ)言，則用/deep/替代：

<style scoped type="text/scss" lang="scss">
    .test{
        /deep/ *{
            width: 100%;
        }
    }
</style>

tips

??scoped屬性導(dǎo)致css僅對(duì)當(dāng)前組件生效，而html綁定渲染出的內(nèi)容可以理解為是子組件的內(nèi)容，一般情況下子組件不會(huì)被加上對(duì)應(yīng)的屬性，所以不會(huì)應(yīng)用帶有scoped的css。