Vue的單個文件元器件數據-V-XXXXXXXX結合生成的元素

Question

我建立一個Vue的組件作爲單個文件組件：

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

<script> 
import * as d3 from 'd3'; 

export default { 
    data() { 
    return { 
     data: [4, 8, 15, 16, 23, 42], 
    }; 
    }, 
    mounted() { 
    d3.select('.chart') 
     .selectAll('div') 
     .data(this.data) 
     .enter() 
     .append('div') 
     .style('width', d => `${10 * d}px`) 
     .text(d => d); 
    }, 
}; 
</script> 

<style lang="scss" scoped> 
.chart { 
    div { 
    background-color: steelblue; 
    color: white; 
    font: 10px sans-serif; 
    margin: 1px; 
    padding: 3px; 
    text-align: right; 
    } 
} 
</style> 

用的WebPack處理之後，CSS呈現像這樣：

<style type="text/css"> 
.chart div[data-v-xxxxxxxx] { 
    background-color: steelblue; 
    color: white; 
    font: 10px sans-serif; 
    margin: 1px; 
    padding: 3px; 
    text-align: right; 
} 
</style> 

但是HTML顯示爲：

<div data-v-xxxxxxxx class="chart"> 
    <div style="width: 40px;">4</div> 
    <div style="width: 80px;">8</div> 
    <div style="width: 150px;">15</div> 
    <div style="width: 160px;">16</div> 
    <div style="width: 230px;">23</div> 
    <div style="width: 420px;">42</div> 
</div> 

我使用D3來生成子<div> s。我發現data-v-xxxxxxxx未綁定到生成的元素。如果我有孩子<div> S IN的原始模板，而不是生成它們，它們每一個都具有data-v-xxxxxxxx屬性和樣式應用如預期

我認爲根節點的任何後裔，無論是包括在模板或產生應該被綁定到範圍化CSS的規則。有什麼辦法可以強制這個嗎？

Answer 1

vue-loader的新版本（來自版本12.2.0）允許您使用「深層範圍」的CSS。您需要使用它的方式：

<style scoped>現在支持 「深」 選擇，可以影響孩子使用>>>組合子 組件：

.foo >>> .bar { color: red; }會被編譯成：

.foo[data-v-xxxxxxx] .bar { color: red; }

更多關於the release page的資料vue-loader