Vue中ref使用

ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。

在普通的 DOM 元素上使用ref，引用指向的就是 DOM 元素；

如果用在子组件上，引用就指向组件实例。

在vue中的表单form中，如果我们在开发时需要表单提交后，立即清空表单中的所有内容。

则vue的form表单有一个方法如下：

使用$refs.resetFields() 方法即

<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
     <el-form-item label="用户名" prop="username">
         <el-input v-model="addForm.username"></el-input>
     </el-form-item>
     <el-form-item label="密码" prop="password">
         <el-input v-model="addForm.password"></el-input>
     </el-form-item>
</el-form>

methods: {
        // 监听添加用户框的关闭事件
        addDialogClosed() {
            this.$refs.addFormRef.resetFields()
        }
 }

可以在表单提交之后或取消之后清空表单中所有数据。