Laravel5.8/Vue2.6组件中[data-v-xxx]属性解析：可设置吗？会话间是否不变？

嘿，这个[data-v-6ce668ac]其实是Vue的**样式作用域(scoped)**机制生成的唯一标识符，我来逐个解答你的疑问：

1. 什么是[data-v-6ce668ac]？ #

当你（或者组件作者）在Vue单文件组件里使用<style scoped>时，Vue会自动做两件事：

• 给当前组件渲染出的所有DOM元素，加上一个类似data-v-xxxxxx的自定义属性；
• 给这个style块里的所有样式规则，自动加上这个属性选择器的后缀，比如.slider-icon-left会变成.slider-icon-left[data-v-6ce668ac]。

这么做的核心目的是隔离组件样式，避免当前组件的样式意外影响到其他组件，或者全局样式污染组件内部样式。你用的vue-easy-slider组件，作者应该是给它的内部样式加了scoped，所以它的DOM元素都会带上这个属性。

2. 能否在style块中设置它？ #

你不需要手动设置这个属性值——它是Vue编译时自动生成的。不过如果你想在父组件里修改带scoped的子组件样式，有更优雅的方法，不用硬写这个随机哈希的属性：

• 使用深度选择器：在你的SCSS style块里，用::v-deep（Vue 2.x的写法）穿透子组件的scoped样式，比如：

  <style lang="scss" scoped>
    ::v-deep .slider-icon-left {
      transform: rotate(45deg);
      border-left: 3px solid $navigation-color !important;
      border-bottom: 3px solid $navigation-color !important;
    }
  </style>
  

• 用全局样式包裹：把修改的样式放在不带scoped的style块里，同时给父组件加一个唯一类名做前缀，避免样式冲突，比如：

  <style lang="scss">
    .custom-slider-wrapper .slider-icon-left {
      transform: rotate(45deg);
      border-left: 3px solid $navigation-color !important;
      border-bottom: 3px solid $navigation-color !important;
    }
  </style>
  

  然后在父组件的根元素上加上class="custom-slider-wrapper"。

3. 这个标识符下次会话还会保持一致吗？ #

大概率不会保持一致！这个哈希值是Vue根据组件的文件路径、项目编译顺序，甚至是编译环境生成的。如果你的项目重新打包、组件文件移动位置、或者依赖的组件版本更新，这个data-v-xxxxxx的后缀都可能发生变化。这意味着你现在硬写这个属性选择器的样式，下次打包后就会失效，非常不稳定。

所以更推荐用上面提到的深度选择器或者全局样式前缀的方法来修改子组件样式。

内容的提问来源于stack exchange，提问作者mstdmstd