VueJs typescript recursive child components（抛出 [Vue warn]: Unknown custom element）答案

【问题标题】：VueJs typescript recursive child components (throws [Vue warn]: Unknown custom element)VueJs typescript recursive child components（抛出 [Vue warn]: Unknown custom element）
【发布时间】：2020-12-21 13:02:30
【问题描述】：

我正在处理由 DataTypeObject (dto) 生成的动态表单。现在我在创建递归组件时遇到以下警告，指向与父级相同类型的所有组件列表：

vue.runtime.esm.js?2b0e:619 [Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

这里是sn-ps的代码：

第一个是 , 根据 dto.type 决定应该显示什么类型的组件。

<template>
  <div class="field">
    <NumberInputComponent
      v-if="dto.type == 'NumberInput'"
      v-bind:dto="dto"
    ></NumberInputComponent>
    ...
    <FieldGroupComponent
      v-if="dto.type == 'FieldGroup'"
      v-bind:dto="dto"
    ></FieldGroupComponent>
    ...
    <TextFieldComponent
      v-if="dto.type == 'TextField'"
      v-bind:dto="dto"
    ></TextFieldComponent>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import NumberInputComponent from "./NumberInput/NumberInput.vue";
import TextFieldComponent from "./TextField/TextField.vue";
...
import FieldGroupComponent from "./FieldGroup/FieldGroup.vue";
import { Field } from "./Field.dto";
@Component({
  name: 'FieldComponent',
  components: {
    NumberInputComponent,
    TextFieldComponent,
    ...
    FieldGroupComponent
  },
})
export default class FieldComponent extends Vue {
  @Prop() private dto!: Field;
  ...
}
</script>

用于对逻辑组内的其他字段进行分组：

<template>
  <div class="field-group">
    <FieldComponent
      v-for="(field, index) in dto.fields"
      :key="index"
      v-bind:dto="field"
    ></FieldComponent>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import { FieldGroup } from "./FieldGroup.dto";
import FieldComponent from "../Field.vue";

@Component({
  name: "FieldGroupComponent",
  components: {
    FieldComponent,
  },
})
export default class FieldGroupComponent extends Vue {
  @Prop() public dto!: FieldGroup;
}
</script>

如果我在保存更改后不重新加载页面，则子字段可见但重新加载后他们隐藏了。注释掉 FieldGroup 内部时，错误消失。

我尝试重新创建此递归错误，但在另一个递归中一切正常。即使没有设置 name 属性。

感谢所有试图帮助我们的人。

【问题讨论】：

标签： typescript vue.js recursion

【解决方案1】：

好的，我找到了答案。错误是，FieldComponent 在创建之前未在 GroupFieldComponent 中定义。所以我不得不将它从 Component-Decorator 中删除并将其导入 beforeCreate-function

beforeCreate () {
  if(this.$options.components)
  this.$options.components.FieldComponent = require('../Field.vue').default
}

我在vueJs Guide里面找到了答案

【讨论】：