javascript - 如何在 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 警告:

Unknown custom element: < schedule-week > - did you register the component correctly? For recursive components, make sure to provide the "name" option.

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

Answer 1

使用 typescript 时，有多种方法可以声明 vue 组件。基于类的 SFC 方法(您正在使用的方法)需要遵循稍微不同的语法。你使用了 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 文档:

With the introduction of Classes in TypeScript and ES6, there now exist certain scenarios that require additional features to support annotating or modifying classes and class members. Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.

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