V - 插槽，无法设计或访问它

Question

我在我的 nuxt 网页上添加了 v-flip。所以我的模板看起来像这样：

<div class="about__cards">
 <vue-flip class="about__single-card" active-click width = "350px" height="450px">
    <template v-slot:front>
        <p class="about__title">Stacks</p>
      </template>

      <template v-slot:back>
        <h4>My stacks</h4>
        <ul>
          <li>Javascript</li>
          <li>Css</li>
          <li>HTML</li>
          <li>Vue</li>
          <li>Nuxt</li>
        </ul>
      </template>
    </vue-flip>
...

这是我的造型：

.about__cards{
  display:flex;
  justify-content: space-evenly;
  /* background-color: transparent; */
}
.about__single-card{
  border:1px red solid;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: 0.5s;
  position: relative;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.front{
  background: red;
  width: 100%;
  height: 100%;
  /* line-height: 448px; */
  text-align: center;
  vertical-align: middle;
 /*  display: flex;
  flex-direction: column;
  align-content: flex-end; */
}

我放在前面是因为在检查元素时我看到了class。一切似乎都有效。然后我意识到我没有确定样式的范围，所以弄乱了其他页面。我做了，重新启动服务器，现在它不再使用 v 槽的样式。但是，如果我去检查元素并转到预先给定的 "front"class，我可以在那里更改它...我读到您可以设置 v 槽样式，但在我这样做之前所以我有点困惑。我在这里缺少什么？谢谢

Answer 1

这是因为范围样式是 "scoped" 通过使用组件唯一 ID 作为选择器的一部分。

如果你检查你的应用程序，你会看到这样的东西（1d328d7a 是 uid）

<div
  data-v-1d328d7a=""
  class="field-input-wrapper"
...

.field-input-wrapper[data-v-1d328d7a] {
  ...

为了绕过这个，你可以像这样使用deep selector

.about__single-card >>> .front{
  background: red;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

V - 插槽，无法设计或访问它

V - slot, can't style or access it

css

vue.js

nuxt.js

v-slot