互动网站如何做,建设企业网站模板,做响应式网站哪家好,做淘宝客建网站要多少费用目录 ref和$refs
$nextTick 异步更新 ref和$refs
1.作用
利用ref 和$refs可以用于获取dom元素或组件实例
2.特点
查找范围→当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
div refchartRef我是渲染图表的容器/div
⒉.获取时…
目录 ref和$refs
$nextTick 异步更新 ref和$refs
1.作用
利用ref 和$refs可以用于获取dom元素或组件实例
2.特点
查找范围→当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
div refchartRef我是渲染图表的容器/div
⒉.获取时通过$refs获取this.$refs.chartRef 获取
mounted ({console.log(this. $refs.chartRef)
}
4.注意
之前只用document.querySelect(.box)获取的是整个页面中的盒子
获取dom元素
要获取谁的dom元素就在谁的标签内加上 ref’ ‘
ref也是组件通信的一中方法
拿到dom元素是在挂载后mounted
{ref属性值: ref属性所在的dom或组件}
ref可以拿到组件属性和方法
例App.vue
templatedivp refpRef晨起开门雪满山雪晴云淡日光寒。/pbutton clickfn按钮/button/div
/templatescript
export default {methods: {fn () {console.log(this.$refs.pRef)}}
}
/scriptstyle/style$nextTick 异步更新
$nextTick:等DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this . $nextTick(() {this.$refs.inp.focus()
}
注意: $nextTick内的函数体一定是箭头函数这样才能让函数内部的this指向Vue实例
数据改变----dom更新需要时间-等待dom更新完毕操作dom
原理promise.then------MutationObserver-----setImmediate----setTimeout
App.vue
templatedivbutton clickfn按钮/buttoninput typetext v-showisShow reftextRef/div
/templatescriptexport default {name: AppComp,data () {return {isShow: false}},methods: {fn () {console.log(this.$refs.textRef)this.$nextTick(() {this.$refs.textRef.focus()this.isShow true})}}
}
/scriptstyle/style
