typescript - 使用 vue3 和 typescript 访问动态模板引用

Question

我有一个组件可以像这样动态呈现组件：

<div class="row" v-for="(formField, index) in form.formFields" :key="index">
  <boolean-form-item
    v-if="formField.fieldType == 'Boolean'"
    v-model="form.formFields[index]"
    :ref="formField.configuration?.key"
  ></boolean-form-item>
  <numeric-form-item
    v-if="formField.fieldType == 'Number'"
    v-model="form.formFields[index]"
    :ref="formField.configuration?.key"
  ></numeric-form-item>
  <dropdown-form-item
    v-if="formField.fieldType == 'Dropdown'"
    v-model="form.formFields[index]"
    :ref="formField.configuration?.key"
  ></dropdown-form-item>
</div>

每个表单项类型都有一个我想要访问的 validate() 方法。问题是，当使用 $ref 访问它们时，类型是未知的，并且 typescript 会抛出一个错误。

validate() {
  this.form.formFields.forEach((field) => {
    var key = "";
    if (field.configuration) {
      key = field.configuration.key;
    }

    console.log(this.$refs[key].validate()); // <<--- Error Object is of type 'unknown'
  });
},

如何访问组件的动态创建的子组件并执行 validate() 方法？

标签： typescriptvue.jsvue-componentvuejs3

Answer 1

您可以使用打字稿类型转换并执行类似的操作

interface VueFormField extends Vue {
    validate: () => any
}

validate() {
    this.form.formFields.forEach((field) => {
    let key = "";
    if (field.configuration) {
      key = field.configuration.key;
    }
    console.log((this.$refs[key] as VueFormField).validate());
  });
}

您还可以使用动态组件vue 功能来获得更优雅的解决方案来生成表单，也可以使用这样的模板引用