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

Posted 2023-02-22

【中文标题】Vue单文件组件绑定data-v-xxxxxxxx到生成的元素

【英文标题】：Vue Single File Component binding data-v-xxxxxxxx to generated elements

【发布时间】：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 * dpx`)
        .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 代码。

【参考方案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 绑定到生成的元素，但如果明天之前没有在此处发布的解决方案，那么我将接受此答案。