笔记
1.Vue-Injection elForm not found
1)将el-form-item标签是否在el-form标签包裹下
2. 修改element-ui的table 在鼠标悬停hover时的高亮颜色
css:
.el-table tbody tr:hover>td {
background-color:#ecf5ff!important
}
3.Property xxx was accessed during render but is not defined on instance
问题 [https://blog.csdn.net/qq_41499782/article/details/112525805]
当使用element-plus的form表单的时候,ref 里面和 model 里面的绑定的值都时由setup函数返回的,页面里面的form表单无法添加值,并且控制台也报出警告,说form里面的表单的属性渲染通过,但是实例里面没有定义 Property xxx was accessed during render but is not defined on instance
分析
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的验证(虽然这个验证的数据源最终就是表单那边双向绑定得来的);其次,你感觉一下,一边是利用双向绑定提供数据,另一边是拿到数据和规则进行验证,这两边没有很死板地捆绑在一起啊,类似于耦合度不高,未来自定义或者修改的话会方便很多
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 绑定的值不一样,就不会出现这个问题了