在 Vuejs 中使用作用域样式时，是否可以提供签名字符串？答案

【问题标题】：When using scoped styles in Vuejs is it possible to supply the signature string?在 Vuejs 中使用作用域样式时，是否可以提供签名字符串？
【发布时间】：2019-07-31 17:21:30
【问题描述】：

当您在 Vuejs 中使用作用域样式时，它包含一个带有特定签名的 data-v-XXX 字符串。

<template>
  <div>
    <h1>this is a title</h1>
    <p>this is a paragraph</p>
  </div>
</template>

<style scoped>
h1 {
  color: red;
  background-color: black;
}

p {
  font-style: italic;
}
</style>

你会得到一个生成的样式

h1[data-v-3fe14d6d] {
    color: red;
    background-color: black;
}

p[data-v-3fe14d6d] {
    font-style: italic;
}

有没有办法提供注入到 data-v 字符串中的签名字符串？所以你可以有 data-v-MyCustomControlName。

如下所述，我希望提供特定字符串的主要原因是允许第三方样式注入。

虽然 data-v-XXXX 的值可用于此目的，并保证不会发生冲突，但生成的数字很难使用。

我或许应该将问题更改为“使用 Nuxtjs 以最大程度地减少样式冲突并同时最大化第三方样式支持的最佳方式是什么？”

【问题讨论】：

想要自定义名称的原因是什么？ Vue 将为您注入那些自定义的“GUID”——这就是您在没有命名冲突的情况下获得“范围”样式的方式。我认为您想重命名它们是有原因的？
“主要”允许第三方样式自定义，“直接”或通过类似 user-styles.org 的方式。我目前正在尝试设置并使用
您仍然可以这样做而不必担心这些名称...您能否举例说明您的需求没有得到满足？
我知道至少有 3 种方法可以做我想做的事。他们都使用手动方案来确定 css 的范围。最直接的是将类添加到包装 div 并在样式标记中使用 .namedclass h1 和 .namedclass p 。我也可以直接在标签中使用命名类。 h1.namedclass 和 p.namedclass。看来使用 module="named_prefix" 将采用命名前缀并添加到任何命名样式中，因此 h1 class="blog-post-title" 将在生成的 html 和 css 中创建 .named_prefix.blog-post-title 。您也可以在没有 module="named_prefix" 选项的情况下手动执行。

标签： vue.js vue-component nuxt.js

【解决方案1】：

简而言之，这是不可能的。

【讨论】：

你能指出文档或测试表明这是不可能的吗？
我找不到任何直接说“你不能这样做”的东西。我发现官方文档指出 Vue 将添加该独特属性。vuejs.org/v2/guide/comparison.html#Component-Scoped-CSS（我还上过 Vue 课程，但没有人提到能够修改它……让它们可编辑并没有什么意义，这是一种反模式）……
我会等着看是否有替代“否”的方法

【解决方案2】：

如上面的 cmets 中所述，如果无法提供签名字符串，我可以想到 3 种手动解决此问题的方法。

所有这些的缺点是它们是手动过程。此外，如果您选择在其他代码中使用的名称，Vue 仍然会有一些样式冲突。例如，如果您使用类名“包装器”，您的类仍将与任何其他“包装器”类发生冲突。所以命名类仍然需要是唯一的。

使用带有命名类的包装器。这将允许定位孩子并且仍然具有范围样式。这是最简单但也最容易发生冲突的方法。

<template>
  <div class="class-for-scoped-styles">
    <h1>this is a title</h1>
    <p>this is a paragraph</p>
  </div>
</template>

<style>
.class-for-scoped-styles h1 {
  color: red;
  background-color: black;
}

.class-for-scoped-styles p {
  font-style: italic;
}
</style>

为每个标签添加范围名称。不太可能出现碰撞问题。

<template>
  <div>
    <h1 class="class-for-scoped-styles">this is a title</h1>
    <p class="class-for-scoped-styles">this is a paragraph</p>
  </div>
</template>

<style>
h1.class-for-scoped-styles {
  color: red;
  background-color: black;
}

p.class-for-scoped-styles {
  font-style: italic;
}
</style>

为每个标签使用一个命名前缀和一个命名类。我相信这手动执行使用 css 模块的操作 - 但手动执行。这最不可能引发冲突，但也是最冗长且最容易注入手动编码错误的方法。

<template>
  <div>
    <h1 class="class-for-scoped-styles blog-entry-title">this is a title</h1>
    <p class="class-for-scoped-styles blog-entry-description">this is a paragraph</p>
  </div>
</template>

<style>
.class-for-scoped-styles.blog-entry-title {
  color: red;
  background-color: black;
}

.class-for-scoped-styles.blog-entry-description {
  font-style: italic;
}
</style>

所有这些都允许范围样式，并且仍然允许轻松插入主题或第三方自定义样式。我仍在研究使用 css 模块，这最终可能是最好的解决方案。

【讨论】：