封装子组件后，如何从父组件中调用子组件的 ref 方法？-js教程-PHP中文网

封装子组件后，如何从父组件中调用子组件的 ref 方法？

DDD

发布： 2024-10-26 20:42:01

原创

611人浏览过

封装子组件后，如何从父组件中调用子组件的 ref 方法？

子组件 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 方法

小鸽子助手

一款集成于WPS/Word的智能写作插件

查看详情

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

<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 方法。

以上就是封装子组件后，如何从父组件中调用子组件的 ref 方法？的详细内容，更多请关注php中文网其它相关文章！