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官网有这块的案例

0
0

Vue3+ElementPlus+Koa2 全栈开发后台系统

从前端晋级到全栈,让你的未来发展有更多可能

1069 学习 · 580 问题

查看课程