Блог

Существует компонент Vue DisplayContent ,

 <template>
  <div></div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Home from "@/components/Home.vue";

@Component({
  components: {
    Home
  }
})
export default class DisplayContent extends Vue {}
</script>

<style scoped></style>
 

И этот Home компонент похож на,

 <template>
  <div id="content-container">
    <v-container>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium,
      voluptates. Blanditiis neque dolore adipisci? Ad temporibus dolorum nihil
      nam necessitatibus ratione, atque sint. At nostrum quos quas odit
      recusandae sunt.
    </v-container>
  </div></template
>

<script lang="ts">
import { Vue } from "vue-property-decorator";
export default class Home extends Vue {}
</script>

<style>
#content-container {
  padding-top: 3%;
}
</style>
 

Я загружаю компонент ‘Display’ внутри основного App.vue, и он отображает пустую страницу с ошибкой консоли — TypeError: Cannot set property 'components' of undefined

Интересно, что если я удаляю v-component из Home компонента, он загружается нормально без каких-либо ошибок —

 <template>
  <div id="content-container">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium,
      voluptates. Blanditiis neque dolore adipisci? Ad temporibus dolorum nihil
      nam necessitatibus ratione, atque sint. At nostrum quos quas odit
      recusandae sunt.
  </div></template
>

<script lang="ts">
import { Vue } from "vue-property-decorator";
export default class Home extends Vue {}
</script>

<style>
#content-container {
  padding-top: 3%;
}
</style>
 

Кроме того, если я скопирую Home компонент (вместе с v-container ) внутри Display компонента, он отобразит все правильно.

Почему наличие v-container внутри Home ничего не загружает и выдает ошибку?

На случай, если кто-то еще столкнется с этим, я решил это, добавив пустой декоратор @Component в Home.vue — https://github.com/vuejs/vue/issues/7804#issuecomment-702056619