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

【问题标题】：Accessing dynamic template refs with vue3 and typescript使用 vue3 和 typescript 访问动态模板引用
【发布时间】：2021-12-17 23:33:45
【问题描述】：

我有一个像这样动态渲染组件的组件：

<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() 方法？

【问题讨论】：

您确定 key 不是空字符串，例如field.configuration.key 没有定义？旁注，不要再使用var，在这种情况下let 将是正确的关键字。除了你仍然以 IE

标签： typescript vue.js vue-component vuejs3

【解决方案1】：

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

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());
  });
}

您还可以使用 dynamic component vue 功能来获得更优雅的解决方案来生成您的表单，也可以使用模板引用，例如 this

【讨论】：