ref的使用
来源:5-4 菜单交互及递归实现(上)

柠檬茶之
2022-10-26
老师你好,为什么一定要加ref=“form”,重置函数@click=“handleReset(‘form’)” 才生效,不加就不生效?
<el-form ref="form" :inline="true" :model="queryForm">
<el-form-item label="菜单名称" prop="menuName">
<el-input v-model="queryForm.menuName" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="菜单状态" prop="menuState">
<el-select v-model="queryForm.menuState">
<el-option :value="1" label="正常"></el-option>
<el-option :value="2" label="停用"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getMenuList">查询</el-button>
<el-button @click="handleReset('form')">重置</el-button>
</el-form-item>
</el-form>
写回答
1回答
-
河畔一角
2022-11-01
这个是Vue3的新写法,以前在Vue2的时候我们要在el-form上面定义一个ref,然后再代码里面通过this.$refs来获取该form对象,再调用validate方法进行验证。在Vue3里面,我们是通过ref来定义一个变量form,把这个变量传给了el-form上面的ref,在验证的时候直接用会报错,需要在事件里面把这个对象传递进去才能获取到,element-plus官网有这块的案例
00
相似问题