网站建设下坡路,深圳自助网站建设费用,中国科技成就手抄报,网站速度的重要性Vue组件-$refs和$nextTick使用一、获取DOM二、$refs获取组件对象三、$nextTick异步更新DOM四、组件name属性的使用一、获取DOM 通过id或ref属性获取原生DOM 在mounted生命周期 – 2种方式获取原生DOM标签 目标标签 – 添加id / ref恰当时机, 通过id / 通过ref属性 获取目标标签…
Vue组件-$refs和$nextTick使用一、获取DOM二、$refs获取组件对象三、$nextTick异步更新DOM四、组件name属性的使用一、获取DOM 通过id或ref属性获取原生DOM 在mounted生命周期 – 2种方式获取原生DOM标签 目标标签 – 添加id / ref恰当时机, 通过id / 通过ref属性 获取目标标签
二、$refs获取组件对象 通过ref属性获取组件对象 三、$nextTick异步更新DOM
$nextTick原地返回Promise对象 原因:Vue更新DOM是异步的 -----html部分p refmyp{{ count }}/pbutton clickbtn点击count1,马上提取p标签的内容/button-------js部分btn() {this.count//vue检测数据更新,开启一个DOM更新队列(异步任务)//vue更新dom是异步代码console.log(this.$refs.myp.innerHTML);//0(还是默认data定义的0)}等DOM更新后, 触发此方法里函数体执行 语法: this.$nextTick(函数体)
btn() {this.count//vue检测数据更新,开启一个DOM更新队列(异步任务)//vue更新dom是异步代码// console.log(this.$refs.myp.innerHTML);//0//解决方法 DOM更新完会挨个触发$nextTick里的函数体this.$nextTick(() {console.log(this.$refs.myp.innerHTML);//})
}扩展 可采用await 取代回调函数 async btn() {//扩展 await取代回调函数//$nextTick函数 原地返回Promise对象await this.$nextTick()console.log(this.$refs.myp.innerHTML)}四、组件name属性的使用 组件name可用作注册组件名字 1. 组件定义name属性和值 2.注册组件可用上面name的值
