html - Vue单文件组件绑定(bind)data-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>秒。我发现 data-v-xxxxxxxx不绑定(bind)到生成的元素。如果我包括 child <div> s 在原始模板中而不是生成它们，它们每个都有 data-v-xxxxxxxx属性和样式按预期应用

我认为根节点的任何后代，无论是包含在模板中还是生成的，都应该遵守作用域 CSS 的规则。有什么办法可以强制执行此操作吗？

Answer 1

新版本vue-loader (从版本 12.2.0 开始)允许您使用“深度范围”css。你需要这样使用它:

<style scoped> now support "deep" selectors that can affect child components using the >>> combinator:

.foo >>> .bar { color: red; } will be compiled into:

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

有关 the release page 的更多信息的 vue-loader