Vue组件-$refs、$nextTick和name属性的使用
创始人
2024-05-28 21:10:20
0次

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部分
{{ count }}
-------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的值
    在这里插入图片描述
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：【Unity3D】空间和变换

下一篇：嵌入式和Python（一）：python环境搭建的详细步骤

相关内容

热门资讯

安卓系统怎么关钥匙,轻松掌握钥... 手机里的安卓系统，是不是有时候让你觉得有点儿头疼？比如，当你想关掉手机，却发现钥匙在哪里呢？别急，今...
安卓系统有隐私空间,打造安全私... 你知道吗？在智能手机的世界里，安卓系统可是个超级明星呢！它不仅功能强大，而且现在还悄悄地给你准备了一...
安卓系统设置角标,打造专属通知... 你有没有发现，手机上的安卓系统设置里有个神奇的小功能——角标？这个小东西虽然不起眼，但作用可大了去了...
安卓系统定位信息查询,揭秘移动... 你有没有想过，你的手机里藏着多少秘密？尤其是那个安卓系统，它可是个超级侦探，随时随地都在帮你定位。今...
安卓刷入系统恢复,轻松实现设备... 手机系统崩溃了？别慌！安卓刷入系统恢复大法来啦！ 手机，这个我们生活中不可或缺的小伙伴，有时候也会闹...
安卓系统限制无法录音,探索无法... 你有没有遇到过这种情况？手机里明明装了录音软件，却突然发现，哎呀妈呀，竟然无法录音了！这可真是让人头...
怎么降级手机系统安卓,操作指南... 手机系统升级了，新功能层出不穷，但有时候，你可能会觉得，这系统太卡了，想回到那个流畅如丝的年代。别急...
米oa系统是安卓系统吗,深入解... 亲爱的读者，你是否曾好奇过，米OA系统是不是安卓系统的一员？这个问题，就像是一颗好奇的种子，悄悄地在...
手机刷安卓车载系统,手机刷机后... 你有没有发现，现在开车的时候，手机和车载系统之间的互动越来越紧密了呢？想象当你驾驶着爱车，一边享受着...
vivo安卓怎么降系统,viv... 手机用久了，是不是觉得系统越来越卡，运行速度大不如前？别急，今天就来教你怎么给vivo安卓手机降降级...
nova 4刷安卓系统,体验全... 最近手机界可是热闹非凡呢！听说华为nova 4要刷安卓系统了，这可真是让人兴奋不已。你有没有想过，你...
如果当初没有安卓系统,科技世界... 想象如果没有安卓系统，我们的生活会是怎样的呢？是不是觉得有点不可思议？别急，让我们一起穿越时空，探索...
安卓电视装win系统,系统转换... 亲爱的读者们，你是否曾想过，在你的安卓电视上装一个Windows系统，让它瞬间变身成为一台功能强大的...
安卓手机还原系统好处,重拾流畅... 你有没有遇到过安卓手机卡顿、运行缓慢的情况？别急，今天就来给你揭秘一下安卓手机还原系统的那些好处，让...
安卓系统能跑win吗,探索跨平... 你有没有想过，你的安卓手机里能不能装上Windows系统呢？这听起来是不是有点像科幻电影里的情节？别...
安卓车载系统蓝牙设置,畅享智能... 你有没有发现，现在开车的时候，手机和车载系统之间的互动越来越频繁了呢？这不，今天就来给你详细说说安卓...
奥利奥安卓系统,探索新一代智能... 你有没有想过，一块小小的奥利奥饼干竟然能和强大的安卓系统扯上关系？没错，今天就要来聊聊这个跨界组合，...
微信使用安卓系统,功能解析与操... 你有没有发现，现在用微信的人越来越多了呢？尤其是安卓系统的用户，简直就像潮水一样涌来。今天，就让我带...
体验最新原生安卓系统,极致体验... 你有没有想过，手机系统就像是我们生活的调味品，有时候换一种口味，生活都会变得有趣起来呢？最近，我体验...
安卓系统能玩原神,尽享奇幻冒险... 你有没有想过，在安卓系统上也能畅玩《原神》这样的热门游戏呢？没错，就是那个画面精美、角色丰富、玩法多...