子组件 ref 方法在父组件中的妙用

在 element ui 中，使用子组件的 ref 方法可以访问子组件实例。但是，当子组件被封装起来的时候，如何从父组件调用子组件的 ref 方法呢？

封装子组件

以下代码展示了封装好的子组件：

<template>
  <el-form :model="formmodel" ref="formref" :rules="formrules" :label-width="formdata.labelwidth">
    <el-form-item :label="item.label" :prop="item.prop" v-for="(item, k) in formdata.items" :key="k">
      <!-- 输入框或文本域 -->

      <!-- 其他表单元素（省略） -->
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'eform',
  props: {
    formdata: {
      type: object,
      required: true,
      default: () => {}
    },
    formmodel: {
      type: object,
      required: true,
      default: () => {}
    },
    formrules: {
      type: object,
      required: false,
      default: () => {}
    }
  },
  methods: {
    childmethod() {
      this.$refs['formref'].resetfields()
    },
    validateformitem() {
      this.$refs['formref'].validate(valid => {
        this.$emit('validateform', valid, this._props.formmodel)
      })
    }
  }
}
</script>

父组件调用子组件 ref 方法

在父组件中，你可以通过以下方式访问子组件实例：

<template>
  <!-- 子组件 -->
  <e-form ref="form"></e-form>
</template>

<script>
export default {
  methods: {
    // 直接调用子组件 ref 方法
    resetform() {
      this.$refs.form.$refs['formref'].resetfields()
    }
  }
}
</script>

或者，你可以先定义一个中间变量：

<script>
export default {
  mounted() {
    const form = this.$refs.form
    // 通过中间变量调用子组件 ref 方法
    form.$refs['formRef'].resetFields()
  }
}
</script>

解决问题

问题中的情况下，你在子组件的 mounted 钩子中尝试直接调用 ref 方法，这是不会生效的。正确的做法是在 methods 中定义一个重置表单的函数，并通过它来调用 ref 方法。