Vue单一文件组件将data-v-xxxxxxxx绑定到生成的元素 [英] Vue Single File Component binding data-v-xxxxxxxx to generated elements

问题描述

我正在将Vue组件构建为单个文件组件：

 < template> 
< div class = chart>< / div> 
< / template> 
 
< script> 
进口*作为 d3中的d3； 
 
导出默认值{
 data（）{
 return {
 data：[4，8，15，15，16，23，42]，
} ; 
}，
 mount（）{
 d3.select（'。chart'）
 .selectAll（'div'）
 .data（this.data）
 .enter（）
 .append（'div'）
 .style（'width'，d =>`$ {10 * d} px`）
 .text（ d => d）; 
}，
}; 
< / script> 
 
< style lang = scss限定范围> 
 .chart {
 div {
 background-color：steelblue; 
颜色：白色； 
字体：10px sans-serif; 
保证金：1px； 
填充：3px； 
 text-align：right; 
} 
} 
< / style> 
  

使用webpack处理后，CSS呈现如下：

 < style type = text / css> 
 .chart div [data-v-xxxxxxxx] {
背景颜色：steelblue; 
颜色：白色； 
字体：10px sans-serif; 
保证金：1px； 
填充：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生成子对象÷

code> s。我发现 data-v-xxxxxxxx 没有绑定到生成的元素。如果我在原始模板中包含子< div> 而不是生成它们，则它们每个都有 data-v-xxxxxxxx 属性和样式符合预期

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

解决方案

vue-loader （从版本12.2.0起）允许您使用深度作用域 css。您需要以这种方式使用它：

< style scoped> 现在支持使用>>> 组合器可以影响子
组件的深度选择器：

.foo>>> .bar {颜色：红色； } 将被编译为：

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

有关 vue-loader

的发布页面

I'm building a Vue component as a Single File Component:

<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>

After processing with webpack, the CSS is rendered like so:

<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>

But the HTML shows up as:

<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>

I'm using D3 to generate the child <div>s. I've found that data-v-xxxxxxxx isn't bound to generated elements. If I include the child <div>s in the original template rather than generating them, they each have the data-v-xxxxxxxx attribute and the styles apply as expected

I would think that any descendant of the root node, whether included in the template or generated, should be bound to the rules of the scoped CSS. Is there any way to force this?

解决方案

New version of vue-loader (from version 12.2.0) allows you to use "deep scoped" css. You need to use it that way:

<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; }

More informations on the release page of vue-loader

这篇关于Vue单一文件组件将data-v-xxxxxxxx绑定到生成的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！