Vue单文件组件绑定data-v-xxxxxxxx到生成的元素答案

【问题标题】：Vue Single File Component binding data-v-xxxxxxxx to generated elementsVue单文件组件绑定data-v-xxxxxxxx到生成的元素
【发布时间】：2017-11-26 07:02:12
【问题描述】：

我正在构建一个 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 而不是生成它们，它们每个都有 data-v-xxxxxxxx 属性并且样式按预期应用

我认为根节点的任何后代，无论是包含在模板中还是生成的，都应该绑定到范围 CSS 的规则。有什么办法可以强制吗？

【问题讨论】：

你能分享你的模板代码吗？
@El_Matella 我已经使用模板编辑了问题并包含了一些新见解。
你能不能把D3生成子div的代码也加进去？
@aug 我重新安排了问题以包含整个 .vue 文件，包括 D3 代码。

标签： html css sass vue.js vue-component

【解决方案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

【讨论】：

很好的解决方法，谢谢！这完全适用于我的问题。我最终不得不使用.chart /deep/ div {... 使其适用于 SCSS。我已将问题重新表述为专注于如何将data-v-xxxxxxxx 绑定到生成的元素，但如果明天之前没有在此处发布的解决方案，那么我将接受此答案。