当前位置: 首页 > 知识库问答 >
问题:

javascript - elementui 父组件用子组件的ref方法怎么弄?

姜玮
2024-02-11

老师们好,我用el-form封装了一个组件, 父组件想调用这个组件的的this.$refs['formRef'].resetFields() 方法, 测试了一些方法都不好用想请老师们给一个思路,谢谢啦。这个环境是用vue2.

下面是封装子组件的代码:

<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-input                v-if="item.type === 'input'"                v-model="formModel[item.prop]"                :type="item.inputType"                :maxlength="item.maxlength"                :minlength="item.minlength"                :placeholder="item.placeholder"                :clearable="item.clearable"                :size="item.size"                :showWordLimit="item.showWordLimit"                :disabled="item.disabled"                :style="{ width: item.width }"                :rows="item.rows"            >            </el-input>            <!-- 下拉选择 -->            <el-select v-model="formModel[item.prop]" :placeholder="item.placeholder" v-if="item.type === 'select'">                <el-option :label="o.label" :value="o.value" v-for="(o, k) in item.options" :key="k" :disabled="item.disabled"></el-option>            </el-select>            <!-- 开关 -->            <el-switch v-model="formModel[item.prop]" :disabled="item.disabled" v-if="item.type === 'switch'"></el-switch>            <!-- 单选框 -->            <el-radio-group v-model="formModel[item.prop]" v-if="item.type === 'radio'">                <el-radio :label="o.value" v-for="(o, k) in item.options" :key="k">{{ o.label }}</el-radio>            </el-radio-group>            <!-- 多选框 -->            <el-checkbox-group v-model="formModel[item.prop]" v-if="item.type === 'checkbox'">                <el-checkbox :label="o.value" v-for="(o, k) in item.options" :key="k">{{ o.label }}</el-checkbox>            </el-checkbox-group>        </el-form-item>    </el-form></template><script>export default {    name: 'EForm',    // components: { EInput },    props: {        formData: {            type: Object,            required: true,            default: () => {}        },        formModel: {            type: Object,            required: true,            default: () => {}        },        formRules: {            type: Object,            required: false,            default: () => {}        }    },    data() {        return {}    },    mounted() {        // console.log('this.ref: ', this.$refs)        // const entries = Object.entries(this.$refs['formRef'])        // for (const [key, value] of entries) {        //     this[key] = value        // }    },    methods: {        childMethod() {            // this.$refs            this.$refs['formRef'].resetFields()        },        validateFormItem() {            this.$refs['formRef'].validate(valid => {                this.$emit('validateForm', valid, this._props.formModel)            })        }    }}</script><style lang="sass" scoped></style>

共有1个答案

通啸
2024-02-11

你需要在 methods 里面定义一个 resetFields 啊。

不然的话,就是 this.$refs['formRef'].$refs['formRef'].resetFields 这种形式。你可以 console 一下看看

或者用 vue 的浏览器插件看就懂了

 类似资料:
  • 父组件动态传递ref给子组件应该怎么写? 父组件调用 子组件 这里我想把父组件传递的ccc动态给子组件,然后操作子组件?

  • 本文向大家介绍Vue通过ref父子组件拿值方法,包括了Vue通过ref父子组件拿值方法的使用技巧和注意事项,需要的朋友参考一下 父拿子的值 子拿父的值 有了ref拿值不能更方便~ 以上这篇Vue通过ref父子组件拿值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Vue父组件调用子组件事件方法,包括了Vue父组件调用子组件事件方法的使用技巧和注意事项,需要的朋友参考一下 Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: 父组件: 以上这篇Vue父组件调用子组件事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希

  • 我需要在ReactJS中从父组件调用子组件方法。我试过使用裁判,但不能做到这一点。有没有人能提出任何解决方案。多谢了。

  • 本文向大家介绍在子组件中怎么访问到父组件的实例?相关面试题,主要包含被问及在子组件中怎么访问到父组件的实例?时的应答技巧和注意事项,需要的朋友参考一下 通过

  • 本文向大家介绍vue 子组件向父组件传值方法,包括了vue 子组件向父组件传值方法的使用技巧和注意事项,需要的朋友参考一下 子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 子组件component-a这么写 以上这篇vue 子组件向父组件传值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍vue2.0父子组件及非父子组件之间的通信方法,包括了vue2.0父子组件及非父子组件之间的通信方法的使用技巧和注意事项,需要的朋友参考一下 1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组