vue瀏覽器編譯時 節點上出現data-v-xxx和父組件改變子組件的內部樣式

一、data-v-xxx

vue頁面被瀏覽器解析後，在標籤中出現’data-v-xxxxx’標記，如下： 

原因：
在vue文件的css中樣式加了scoped

<style scoped>
    .FooterGuide{
        color: pink
    }
</style>

這是在標記vue文件中css時使用scoped標記產生的，因爲要保證各文件中的css不相互影響，給每個component都做了唯一的標記，所以每引入一個component就會出現一個新的’data-v-xxx’標記。

需求描述：由於樣式中使用了scoped，所以編譯後標籤對中生成data-v-xxx屬性。在【.dialog_content】的div中 動態添加元素節點p和span時，也需要給元素節點添加data-v-xxx屬性。由於data-v-xxx屬性是會變化的，那如何獲取它，添加在動態添加的元素節點中呢？
【解決方法】

獲取屬性名【document.getElementById("dialog_submit").attributes[0].name】

設置屬性【nodeP.setAttribute(dataV, "")】

var nodeP = document.createElement("p"),
nodeSpan = document.createElement("span");
// 獲取data-v-xxxx的值
var dataV = document.getElementById("dialog_submit").attributes[0].name;
// 設置屬性
nodeP.setAttribute(dataV, "");
nodeSpan.setAttribute(dataV, "");

二、深作用選擇器

如果希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，可以使用 >>> 操作符：

<style scoped>
    .a >>> .b { /* ... */ }
</style>

上述代碼被編譯爲：

.a[data-v-f3f3eg9] .b { /* ... */ }

如果是有些像Sass、less之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 操作符取而代之——這是一個 >>> 的別名，同樣可以正常工作。如下：

<style scoped lang="scss">
h1 {
  color: brown;
}
.home {
  /deep/ .title {
    color: rebeccapurple;
  }
}
</style>

小提示：

上述方法只針對於子組件內部的樣式，在父組件中子組件的 width、height等屬性不屬於子組件的內部的樣式哦，直接用常規方法修改即可。