Vue组件-$refs、$nextTick和name属性的使用

一、获取DOM

通过id或ref属性获取原生DOM

• 在mounted生命周期 – 2种方式获取原生DOM标签
  • 目标标签 – 添加id / ref
  • 恰当时机, 通过id / 通过ref属性 获取目标标签
    
    

二、$refs获取组件对象

通过ref属性获取组件对象

三、$nextTick异步更新DOM

• $nextTick原地返回Promise对象

原因:Vue更新DOM是异步的

    -----html部分<p ref="myp">{{ count }}</p><button @click="btn">点击count+1,马上提取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的值