如何在 vue+ts 中正确注册组件？

Question

我有这个代码：
应用程序.vue

<template>
  <v-container>
    <div>
      <schedule-table
      v-if = "schedule.length > 0"
      :exercises="schedule[0].exercises"
      />
    </div>
  </v-container>
</template>
<script lang="ts">

import Vue from "vue";
import { Component } from "vue-property-decorator";
import ScheduleTable from '@/components/ScheduleTable.vue'

@Component({
  components: {
    ScheduleTable,
  }
})
</script>

调度表.vue

<template>
  <v-container>
    <schedule-week
    :exercises="exercises"
    />
  </v-container>
</template>
<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { IExercise } from "@/interfaces"
import ScheduleWeek from '@/components/ScheduleWeek.vue'

@Component({
  name: 'ScheduleWeek',
  components: {
    ScheduleWeek,
  }
})

@Component
export default class ScheduleTable extends Vue {
  @Prop( {required: true, type: Array } ) readonly exercises!: IExercise;
}
</script>

ScheduleWeek.vue

<template>
  <v-container
  :ex="exercises"
  >
    here is tables (but this tables dosn't show and any other text dosn't show)
  </v-container>
</template>
<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { IExercise } from "@/interfaces"


@Component
export default class ScheduleWeek extends Vue {
  @Prop( {required: true, type: Array } ) readonly exercises!: IExercise;
}
</script>

并有 vue 警告：

未知的自定义元素：< schedule-week > - 您是否正确注册了组件？ 对于递归组件，请确保提供“名称”选项。

如何解决这个问题？ 如何正确注册组件？

Answer 1

使用 typescript 时，有多种方法可以声明 vue-component。 基于类的 SFC 方法（您正在使用的方法）需要遵循稍微不同的语法。 您在 schedule-week 组件中使用了两次 typescript decorator

应用程序.vue

<v-container>
    <div>
      <schedule-table
      v-if = "schedule.length > 0"
      :exercises="schedule[0].exercises"
      />
    </div>
  </v-container>
</template>
<script lang="ts">

import { Component, Vue } from "vue-property-decorator"; // you can import vue here
import ScheduleTable from '@/components/ScheduleTable.vue'

@Component({
  components: {
    ScheduleTable,
  }
})
export default class App extends Vue {} // the @Component() decorator needs to be followed by the exported class

相应地，您的其他组件：

调度表.vue

<template>
  <v-container>
    <schedule-week
    :exercises="exercises"
    />
  </v-container>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator"; // see above
import { IExercise } from "@/interfaces"
import ScheduleWeek from '@/components/ScheduleWeek.vue'

@Component({
  name: 'ScheduleTable',
  components: {
    ScheduleWeek,
  }
}) // >>>don't use the decorator twice<<<
export default class ScheduleTable extends Vue {
  @Prop( {required: true, type: Array } ) readonly exercises!: IExercise;
}
</script>

ScheduleWeek.vue

<template>
  <v-container
  :ex="exercises"
  >
    here is tables (but this tables dosn't show and any other text dosn't show)
  </v-container>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator"; // see above
import { IExercise } from "@/interfaces"


@Component
export default class ScheduleWeek extends Vue {
  @Prop( {required: true, type: Array } ) readonly exercises!: IExercise;
}
</script>

＃＃编辑：

来自官方 TypeScript 文档：

随着 TypeScript 和 ES6 中类的引入，现在存在某些需要附加功能来支持注释或修改类和 class 成员的场景。 装饰器提供了一种为 class 声明和成员添加注释和元编程语法的方法。

装饰器基本上是 TypeScript(JavaScript) 函数，用于向以下class （您的组件）或 class 成员添加附加信息。 这也意味着装饰者不能独立存在。 @Component()装饰器将Object作为参数，“原样”转换为组件选项。

Answer 2

TL;博士

要在MyComponent中注册组件SubOne和SubTwo ，请将其传递给@Component装饰器：

import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    SubOne,
    SubTwo,
  }
}) 
export default class MyComponent extends Vue {
  …
}

并确保你也像这样装饰子组件；

import { Component, Vue } from "vue-property-decorator";

@Component
export default class SubOne extends Vue {
  …
}

@MarcRo 的回答有误

设置和产生的错误

在组件ScheduleTable.vue中，装饰器@Component将参数name设置为它即将导入的组件。 这会导致对所述组件的递归调用，从而导致错误。

使固定

设置name: 'ScheduleTable' - 甚至删除它。 似乎使用了 class 名称（这就是我们正在做的）。

在旁边

我找不到关于什么可以实际传递给装饰器的文档，但它在App.vue和这里的@MarcRo 的回答中像这样使用。 （评论中的链接似乎很旧）。

我没有足够的声誉来发表评论，并且修复编辑被拒绝，所以很抱歉额外的帖子。

感谢@MarcRo 在很长一段时间后解决递归错误后教我如何使用它和 facepalm 时刻；）