我试图将一个组件包含到另一个组件中，但在浏览器控制台中收到错误“无法解析组件：应用程序概述表”。

父组件“src/pages/ApplicationsOverview.vue”：

<template>
  <q-page class="flex flex-center">
    <applications-overview-table></applications-overview-table>
  </q-page>
</template>

<script>
import ApplicationsOverviewTable from '../components/application/OverviewTable.vue';

export default {
  name: 'ApplicationsOverviewPage',

  components: [ApplicationsOverviewTable],

  setup() {
    console.log('loading applications overview');

    return {};
  },
};
</script>

<style></style>

子组件“src/applications/OverviewTable.vue”：

<template>
  <div class="q-pa-md">
    <q-table title="Aanvragen" :rows="rows" :columns="columns" row-key="name" />
  </div>
</template>

<script>
const columns = [ ... ];
const rows = [ ... ];

export default {
  name: 'ApplicationsOverviewTable',
  setup() {
    return {
      columns,
      rows,
    };
  },
};
</script>

我可以看到正在加载父组件，因为控制台中显示了控制台消息“正在加载应用程序概述”。
我还可以看到路径OverviewTable.vue是正确的，因为如果我更改路径，则会出现另一个错误。

我尝试更改<applications-overview-table>为，<ApplicationsOverviewTable> …

Vue 3 不推荐使用v-deep组合器：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

我们有使用 SCSS 的现有代码，v-deep如下所示：

.class ::v-deep {
  .child-class1 {...}
  .child-class2 {...}
}

编译成这样的东西：

.class ::v-deep {
  .child-class1 {...}
  .child-class2 {...}
}

在 Vue 3 中，这种语法已被弃用，我们需要这样做：

.class {
  ::v-deep(.child-class1) {...}
  ::v-deep(.child-class2) {...}
}

我们必须v-deep对每个嵌套规则重复。事实上，还有更多且复杂的规则。

在 SCSS 中是否有任何方法可以构造一个嵌套块，其中所有内部规则都包装到此::v-deep(...)语法中？

我正在寻找类似的东西（不是实际的语法）：

::v-deep(&) {
  .child-class1 {...}
  .child-class2 {...}
}

除了自选择器 ( &) 具有相反的含义之外，它引用子选择器而不是父选择器。

我正在尝试将一些 Vue.js 单文件组件从::v-deep语法迁移到:deep()，如此处所述。但是，我不确定如何使其与嵌套SCSS 规则一起使用&__*。没有工作的规则&__*也很好。

我们使用的 SCSS 编译器是dart-sass。

例子

例如，有这个原始片段：

::v-deep .wrapper {
    display: flex;

    &__element {
        display: block
    }
}

正确地将代码编译为

[data-v-S0m3Ha5h] .wrapper__element {
    display: block;
}

并抛出警告：[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

:deep()在顶层规则中

我尝试将其转换为:deep()这样：

:deep(.wrapper) {
    display: flex;

    &__element {
        display: block
    }
}

这会导致编译器错误，因为:deep(wrapper)__element不是有效的选择器。

:deep()在嵌套规则中

所以我将 移至:deep嵌套规则：

.wrapper …

在 Vue 单文件组件中使用时，有没有办法让 VS Code 支持 Pug 中的折叠块？那是：

<template lang="pug"
...
</template>

我有一个使用脚本设置方法的 Vue 3 单文件组件。我想要定义的道具之一是接受该class属性的等效项。这意味着 prop 值可以是字符串、表达式、数组或对象。当我尝试withDefaults()为该道具分配默认的空字符串值时，问题就出现了。

withDefaults(
  defineProps<{
    itemClass?: unknown
  }>(),
  {
    itemClass: '',
  }
)

其绑定为

<div :class="itemClass">...</div>

我试图避免使用anyas 类型。我尝试过unknown，但当我尝试为其指定默认值时出现错误。临时解决方案似乎是简单地删除默认值，但在某些情况下我可能需要设置默认值。

Vue 属性有特定类型吗class？

我正在尝试使用 Typescript 设置 Vue3 项目。
我收到错误：“文件 '/home/.../src/App.vue.ts' 不是模块”。

在 中使用 Javascript 时main.js，它工作正常，但是当将其重命名为 时main.ts，我无法导入“.vue”文件。
主要.ts：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

现在，运行时yarn serve，输出显示：

ERROR in src/main.ts:2:17
TS2306: File '/home/.../src/App.vue.ts' is not a module.
    1 | import { createApp } from 'vue';
  > 2 | import App from './App.vue';
      |                 ^^^^^^^^^^^
    3 | import router from './router';

让 Typescript 理解文件的方法是什么.vue？