vuejs从组件属性生成动态表单

Question

我正在尝试根据组件的props定义生成表单，例如required，default来设置表单输入的占位符value，并根据属性的type提供不同的输入。

如果我引用的是组件定义本身而不是实例的引用，那么这是唯一的方法，例如：import MyCompnent from './MyComponent.vue。 MyComponent将具有props，其中包含所有属性定义。

我需要一个实例。只有this.$props根本不提供有关属性本身的任何信息。

此外，我的组件层次结构如下所示：

BaseComponent.vue：

<template>
  <div class="outer">
    <slot />

    <!-- dynamically generated form -->
  </div>
</template>

<script>
  export default {
    computed: {
      properties () {
        // generate object based on current component's properties
      }
    }
  }
</script>

ChildComponent.vue：

<template>
  <base-component>
    text from child
  </base-component>
</template>

<script>
import BaseComponent from './BaseComponent.vue' 

export default {
  components: { BaseComponent },
  extends: BaseComponent,
  props: {
    // ...
  }
}
</script>