Vue踩坑——this.refs为空

Vue踩坑——this.refs为空我们在用vue的时候，会遇到一些坑，比如我们使用 this.$refs 获取不到值，页面明明有啊百思不得其解……原来这个跟Vue的钩子有关系总结来说：1、必须要等页面中的ref子组件加载完毕，才可以获取到2、在mounted之前的钩子函数中获取不到3、组件在v-if为false的父节点下，导致这个子组件未渲染，也是导致获取不到的因素，不要忽视哦...

零散大使

11902人浏览 · 2019-06-12 16:01:44

零散大使 · 2019-06-12 16:01:44 发布

Vue踩坑——this.refs为空

我们在用vue的时候，会遇到一些坑，比如我们使用 this.$refs 获取不到值，页面明明有啊
在这里插入图片描述
百思不得其解……原来这个跟Vue的钩子有关系

总结来说：
1、必须要等页面中的ref子组件加载完毕，才可以获取到
2、在mounted之前的钩子函数中获取不到
3、组件在v-if为false的父节点下，导致这个子组件未渲染，也是导致获取不到的因素，不要忽视哦

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^