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

Question

老师们好，我用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>

Answer 1

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

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

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