javascript - Hvordan registrere komponent korrekt i vue+ts?

Jeg har denne koden:
App.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>

ScheduleTable.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>

Og la Vue advare:

Ukjent tilpasset element: < schedule-week > - har du registrert komponenten riktig? For rekursive komponenter, sørg for å oppgi "name"-alternativet.

Hvordan løse dette problemet? Hvordan registrere komponenten riktig?

Svar #1

Det finnes flere måter å deklarere en Vue-komponent på når du bruker TypeScript. Den klassebaserte SFC-tilnærmingen (den du bruker) må følge en litt annen syntaks. Du brukte TypeScript dekoratør to ganger i din schedule-week-komponent

App.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

Tilsvarende dine andre komponenter:

ScheduleTable.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>

##REDIGER:

Fra den offisielle TypeScript-dokumentasjonen:

Med introduksjonen av klasser i TypeScript og ES6 finnes det nå visse scenarier som krever tilleggsegenskaper for å støtte annotering eller modifisering av klasser og klassemedlemmer. Dekoratører gir en måte å legge til både annotasjoner og en metaprogrammeringssyntaks for klasseerklæringer og medlemmer.

Dekoratører er i utgangspunktet TypeScript (JavaScript) funksjoner som brukes til å legge til tilleggsinformasjon til den følgende class (din komponent) eller klassemedlemmer. Dette betyr også at en dekoratør ikke kan stå alene. @Component() dekoratøren tar et Object som parameter, som blir oversatt 'som den er' til komponent-alternativer.

Relaterte artikler