中国电力建设集团公司网站,网站建设支付,可以查各种资料的app,杭州网站建设哪家强ref和$refs获取dom元素 为什么会有 ref 和 $refs#xff1f; 因为在vue页面中使用dom查找元素#xff0c;不管你是不是在子组件里面查找#xff0c;查找的都是整个页面的元素#xff0c;如果你想查找单独组件里面的元素是不容易实现的#xff0c;除非把每个组件的class写…ref和$refs获取dom元素 为什么会有 ref 和 $refs 因为在vue页面中使用dom查找元素不管你是不是在子组件里面查找查找的都是整个页面的元素如果你想查找单独组件里面的元素是不容易实现的除非把每个组件的class写成独一无二但是在日常开发中一个vue页面不知道会有多少组件所以出现了rel和 refs. ref 和 $refs 作用 ref 和 $refs 使用 通过在要获取的元素上面店家rel属性 rel名称。 然后在要获取此元素的js代码上通过 this.$rels.名称 就可以获取。 如此获取的就是当前组件内部的标签了 templatediv!-- 为input框添加rel属性 --input typetext :valuemsg refinpinputfun($event.target.value)button clickshowInput显示/button/div /template script export default {props:{msg:String},mounted(){},methods:{fun(e){this.$emit(update:msg,e)},showInput(){//通过this.$rels.inp获得标签console.log(this.$refs.inp)console.log(this.$refs.inp.value)}} } /script也是成功的获取到了并且打印出来 vue异步更新和$nextTick使用 什么是vue的异步更新 Vue的异步更新是指在Vue的响应式系统中更新组件的方式是异步的。这意味着当数据发生变化时Vue并不立即更新组件的DOM而是等到同一事件循环中的所有数据变化完成后再统一进行一次更新操作。 vue的异步更新好处 Vue之所以采用异步更新的机制是为了优化性能和避免不必要的重复渲染。当数据发生变化时Vue会将变化加入到一个队列中然后通过异步的方式批量处理这些变化。这样可以避免频繁的DOM操作提高性能。 异步更新还带来一个重要的好处即在同一个事件循环中多处对同一数据进行修改时只会触发一次更新操作。这样可以减少重复的计算和渲染提升性能。 总结来说Vue的异步更新可以提高性能和优化渲染使得组件更新更加高效和灵活。 案列 我需要点击编辑按钮 然后显示input框 并且聚焦到input框上。 我的代码是这样的 templatediv!-- 为input框添加rel属性使用v-if来显示隐藏input框 --input typetext :valuemsg v-ifisShow refinp!-- 添加方法 --button clickshowInput编辑/button/div /templatescript export default {data(){return{isShow:false}},props:{msg:String},mounted(){},methods:{showInput(){//显示input框this.isShow true//通过this.$rels.inp获得标签console.log(this.$refs.inp)console.log(this.$refs.inp.value)//为input框聚焦this.$refs.inp.focus()}} } /script然后我点击编辑按钮出现了下面的错误说我的this.$refs.inp是 undefined。 为什么 “显示之后“ 立刻获取焦点没有成功呢 就是vue采用的是异步更新的机制当 //显示input框 this.isShow true时并没有马上去更新页面的dom而是等待这个方法执行完成再去进行更新页面所以导致获取的this.$refs.inp是 undefined。所以问题就是在我在它没有更新dom的时候就去获取dom所以是undefined. 如何解决?(使用$nextTick templatedivinput typetext :valuemsg v-ifisShow refinpbutton clickshowInput编辑/button/div /templatescript export default {data(){return{isShow:false}},props:{msg:String},mounted(){},methods:{showInput(){this.isShow true//通过this.$rels.inp获得标签//将需要使用未更新的dom元素使用this.$nextTick()封装为箭头函数包裹起来this.$nextTick((){this.$refs.inp.focus()console.log(this.$refs.inp)console.log(this.$refs.inp.value)})}} } /script最后成功聚焦并且控制台输出了当前获取标签