V - 插槽，无法设置或访问它答案

【问题标题】：V - slot, can't style or access itV - 插槽，无法设置或访问它
【发布时间】：2020-06-05 09:56:51
【问题描述】：

我在我的 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; */
}

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

【问题讨论】：

标签： css vue.js nuxt.js v-slot

【解决方案1】：

这是因为作用域样式是通过使用组件唯一 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;
}

【讨论】：