在 q-expansion-item 中显示 Vue.js 组件的问题

Question

我正在使用 Quasar Framework 开发 Vue.js 项目，但遇到了一个问题。我有一个项目列表 (essentialLinks)，我正在使用 q-expansion-item 内的 EssentialLink 组件显示这些项目。 EssentialLink 组件定义了一些 CSS 样式（在另一个文件中），但当 EssentialLink 组件在 q-expansion-item 内呈现时，不会应用这些样式。但是，这些样式对于在 q-expansion-item 外部（在 q-separator 之后）呈现的 EssentialLink 组件效果很好。 我认为我使用的方法不正确，我应该使用其他方法吗？？

（我知道代码中的注释不正确，但这只是为了更好地说明代码中的问题）

<template>
    <!-- ↓↓↓ Here the styling doesn't work ↓↓↓ -->
    <q-expansion-item
        EssentialLink v-for="link in essentialLinksSubMenu"
        :key="link.title" 
        v-bind="link" 
        :miniState="drawerMiniState"
    >

    <!-- ↓↓↓Here the styling works just fine ↓↓↓ -->         
    <q-separator/>

    <EssentialLink v-for="link in essentialLinksSubMenu"   
        :key="link.title" 
        v-bind="link" 
        :miniState="drawerMiniState" />

    </q-expansion-item>
</template>

Answer 1

从您提供的代码片段来看，EssentialLink 似乎在 q-expansion-item 中不正确嵌套而没有关闭标签。 结构应该是这样的：

<template>
  <q-expansion-item>
    <template v-slot:header>
      <!-- Your header here -->
    </template>

    <!-- Content inside the expansion item -->
    <EssentialLink v-for="link in essentialLinksSubMenu"
                   :key="link.title" 
                   v-bind="link" 
                   :miniState="drawerMiniState" />

  </q-expansion-item>

  <q-separator/>

  <EssentialLink v-for="link in essentialLinksSubMenu"
                 :key="link.title" 
                 v-bind="link" 
                 :miniState="drawerMiniState" />
</template>

另请注意，如果您使用作用域 CSS，它可能不适用于深度嵌套的子组件或不同组件文件中的子组件。你可能想要 在 Vue.js 中删除范围属性或使用深度选择器（::v-deep 或 /deep/）以确保样式穿透影子 DOM 边界。

.q-expansion-item ::v-deep .essential-link-class {
    /* your styles */
}

您可以在这里阅读更多相关信息https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles 检查 https://github.com/vuejs/vue-loader/issues/957 和 样式不适用于 CSS 范围组件