公司网站免备案,互动平台有效学时,2022年最近一周新闻大事,最近发生的热点新闻事件$refs 与 $el是什么#xff1f; 作用是什么? ref#xff0c;$refs#xff0c;$el #xff0c;三者之间的关系是什么#xff1f;
ref (给元素或者子组件注册引用信息) 就像你要给元素设置样式#xff0c;就需要先给元素设定一个 class 一样#xff0c;同理#xff0c;…$refs 与 $el是什么 作用是什么? ref$refs$el 三者之间的关系是什么
ref (给元素或者子组件注册引用信息) 就像你要给元素设置样式就需要先给元素设定一个 class 一样同理你想获取哪个元素的 DOM就给这个元素先设定一个 ref其实这里和 JS 中的 document.各种方法获取 DOM 差不多不过 ref 是访问 VUE 虚拟出来的DOM这样可以有效的减少性能消耗。
简述三者区别
ref 是 元素的属性用于设置在元素上$refs 是 ref 的集合集合里面包含了当前.vue中的所有 ref用于获取普通元素中的 DOM 以及 子组件中方法/参数的$el 是 用于获取组件内 DOM包括子组件当前.vue组件以及父组件
1点击按钮“确定”触发其他元素上的事件
templatediv classcontentdivel-button typesuccess clickhandleSubmit确定/el-button!-- 设定 refpassA elementui组件按钮--el-button refpassA typesuccess clickhandlePassA被触发 A/el-button/div!-- 设定 refpassB 普通按钮触发事件 --div styleheight:40px; width:100px; background: burlywood; refpassB clickhandlePassB被触发 B/div/div
/template
handleSubmit(){/** 有同学看到这里会问咦博主你这里写法为什么不同呀* 嗯这位同学不错问到正题上了避免了你在实际运用中出现问题* 因为 refpassA 的按钮它是 element ui 提供的组件* 组件本身不是 DOM所以需要 .$el 的帮助后才能提取组件的 DOM* 反之对于提取普通元素上的 DOM 就不需要了*/this.$refs.passA.$el.click()this.$refs.passB.click()console.log(this.$refs)
},
handlePassA(){console.log(我是 PassA, 我报触发了)console.log(我自己的高度 ,this.$refs.passA.$el.offsetHeight)
},
handlePassB(){console.log(我是 PassB, 我报触发了)console.log(我自己的高度 ,this.$refs.passB.offsetHeight)
}, 2.页面加载获取当前.vue文件中整体元素高度
mounted(){/** 这里通过 this.$el 直接获取当前.vue文件整体 DOM*/console.log(this.$el)console.log(我是 当前.vue文件 整体的高度 ,this.$el.offsetHeight)console.log(我是 PassB 我自己的高度 ,this.$refs.passB.offsetHeight)
}, 这里通过 class“content” 与上图中控制台输出的 整体DOM最外层的 calss 比照可以更好的理解 3.父组件调用子组件内的方法/参数这里的例子是页面加载直接调用
子组件
templatedivdiv classborderdiv我是子组件/div input v-modelvalue //div/div
/templatescriptimport {mapGetters} from vuexexport default {name: user-defined,data() {return {value: 0,list: [1,2,3,4]}},methods: {handleAddNum(){console.log(我是子组件里的方法)this.value this.value 1;// 获取父组件DOMlet parentDom this.$parent.$el;}}
}
/script
style scoped langscss
.border{width: 300px;height: 200px;border: 1px solid red;
}
/style
父组件
templatediv classcontentdivel-button typesuccess clickhandleSubmit確定/el-button!-- 设定 refpassA --el-button refpassA typesuccess clickhandlePassA被触发 A/el-button/div!-- 设定 refpassB --div styleheight:40px; width:100px; background: burlywood; refpassB clickhandlePassB被触发 B/div!-- 子组件 设定 refuserDefined --user-defined refuserDefined/user-defined/div
/templatescript
import userDefined from ./user-defined.vue // waves directive
import {mapGetters} from vuexexport default {name: AdminPassword,components: {userDefined},mounted(){// 调用 子组件方法this.$refs.userDefined.handleAddNum()// 调用 子组件list参数console.log(this.$refs.userDefined.list)// 输出 $refs 内的集合console.log(this.$refs)},methods: {handleSubmit(){this.$refs.passA.$el.click()this.$refs.passB.click()console.log(this.$refs)},handlePassA(){console.log(我是 PassA, 我报触发了)console.log(我自己的高度 ,this.$refs.passA.$el.offsetHeight)},handlePassB(){console.log(我是 PassB, 我报触发了)console.log(我自己的高度 ,this.$refs.passB.offsetHeight)},}
}
/script 4.什么情况/场景中使用 this.$nextTick((){})它的作用是什么
templatediv classcontent!-- elementui中的组件按钮 --el-button typesuccess clickhandleSubmit获取下方div中文本/el-button!-- 设定 refmyDiv 普通按钮--div refmyDiv stylewidth: 100px; height: 40px; border: 1px solid red;{{text}}/div/div
/template
data(){return{text: 我今年12岁}
},
methods: {handleSubmit(){/** 为什么我打印出来的不是 【我今年13岁】 呢* 因为 DOM 的值还没有更新完毕所以这里打印的依然是【我今年12岁】*/this.text 我今年13岁console.log(打印 ,this.$refs.myDiv.innerHTML) // 打印结果我今年12岁}
} created(){console.log(created ,this.$refs.myDiv)/** 因为生命周期执行顺序的缘故vue 实例刚刚创建完毕 DOM 还没有进行渲染所以* 打印结果created undefined* 如果你在这里输出 this.$refs.myDiv.innerHTML 控制台还会报错提示 myDiv 不存在*/this.$nextTick((){console.log(created ,this.$refs.myDiv.innerHTML)/** this.$nextTick 监视 DOM 的更新* 会进入 红灯停状态DOM 更新完毕后就会进入 绿灯行驶状态* 打印结果created 我今年12岁*/})
},
methods: {handleSubmit(){this.text 我今年13岁/** this.$nextTick 的作用是什么* 它的作用类似前方道路正在施工施工完毕后可正常行驶* DOM 更新完毕后就会执行 this.$nextTick 内的代码*/this.$nextTick((){console.log(打印 ,this.$refs.myDiv.innerHTML) // 打印结果我今年13岁})}
}
