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

Posted 2023-02-23

【中文标题】使用 vue3 和 typescript 访问动态模板引用

【英文标题】：Accessing dynamic template refs with vue3 and 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

【参考方案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