element-plus form ref 和 model值的关系
感悟的记录
elementui 是一个优秀的前端ui, 现在vue3 出来了,本人也想抓紧时间,赶紧给自己充电加油。现在的element-plus 是一个beta版本,我安装的element-plus 是
"^1.0.1-beta.24"
,遇到这个问题的时候是"^1.0.1-beta.18"
这个版本,反正都是beta版本,只是解决了一些问题。我在element-plus 的 issue 里面看到了form表单中ref 和 model
里面的值相同的时候,form表单时不能够修改的。有小伙伴回答到,当然不可以修改,去看vue的官方文档关于ref,所以个人觉得官方时不会修复这个问题了,在此记录一下,自己学习的心得。
问题
当使用element-plus的form
表单的时候,ref
里面和 model
里面的绑定的值都时由setup
函数返回的,页面里面的form表单无法添加值,并且控制台也报出警告,说form里面的表单的属性渲染通过,但是实例里面没有定义 Property xxx was accessed during render but is not defined on instance
页面上打印from,里面却含有一些奇怪的值。
setup 里面导出的是一个对象,页面上却发生了大变化?
setup() {
const formRef = ref({
text: '',
margin: 0,
size: 100,
mainColor: '#000',
subColor: '#fff'
});
return {
form: formRef,
};
},
如果看到该文章的同学比较急,可以直接往下面看解决办法,中间的原理可以跳过
知识分解
element-plus 中 form表单的model
作用
作用:配合表单验证
-
目前el-form的model主要用表单验证的,也就是配合
el-form
的rules
和el-form-item
的prop来使用的。不信的话,你可以增加一个rules和prop(为了调用验证方法,也el-form也加一个ref属性,相当于id或者class选择器的意思),但是不写model,然后验证的话,会提示缺少model,导致无法验证成功
。 -
里面的逻辑大概是,在
el-form-item上写一个prop
,这个prop左手对应着数据源
(即用model.prop找到对应的数据源),右手对应着验证规则
(即用rules.prop找到对应的规则)。然后就快乐地验证去了。 -
至于为什么不能将el-form的model+el-form-tem的prop这样的组合和表单中的v-model的用法合二为一,最直观的原因就是:作用于不同的标签,
一种是针对表单的双向绑定
,一种是针对el-form和el-form-item的验证
(虽然这个验证的数据源最终就是表单那边双向绑定得来的);其次,你感觉一下,一边是利用双向绑定提供数据,另一边是拿到数据和规则进行验证,这两边没有很死板地捆绑在一起啊,类似于耦合度不高,未来自定义或者修改的话会方便很多 -
源码中使用model 的地方,我们也可以看到,model就是用于表单验证的,如下图:
vue中ref
的作用
vue2 :通过 vm.$refs来获取ref的指定的元素和dom实列
vue3中:和vue2的用法一样
如果vue3中不使用setup函数,里面的ref是一样的,但是如果使用setup的话,并且如果ref绑定的值是setup返回的话,就会产生后面的结果。作为模板使用的引用与任何其他引用的行为一样:它们是响应式的,可以传递给(或从)composition 函数中返回
,我们可以很简单的理解,就是ref可以直接绑定 setup中返回的值,在虚拟DOM修补算法,如果VNode ref的键对应一个裁判在渲染上下文,VNode的相应元素或组件实例的值将分配给裁判。这是虚拟DOM挂载/补丁过程中执行,所以参模板后只会分配值初始渲染
. 原文
回到我们的代码中,我们可以发现,我们from对象在dom编译挂载的时候,已经被改变了,所以页面上才会出现model
和那些属性不存在的问题。
import {ref,onMounted} from "vue";
export default {
setup() {
// 连接的地址,或者文件
const formRef = ref({
text: '',
margin: 0,
size: 100,
mainColor: '#000',
subColor: '#fff'
});
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(formRef.value,'===------') // 打印的是一个dom对象
})
console.log(formRef.value) // 这行代码会先打印,打印我们的form对象,原因是 js的事件循环机制
return {
form: formRef,
};
},
解决办法
- 如果不需要做表单验证,可以不需要使用model,可以不使用这个属性
- 如果需要做表单验证,ref 和 model 绑定的值不一样,就不会出现这个问题了