一、獲取DOM

通過id或ref屬性獲取原生DOM

• 在mounted生命周期 – 2種方式獲取原生DOM標(biāo)簽
  • 目標(biāo)標(biāo)簽 – 添加id / ref
  • 恰當(dāng)時(shí)機(jī), 通過id / 通過ref屬性 獲取目標(biāo)標(biāo)簽
    
    

二、$refs獲取組件對(duì)象

通過ref屬性獲取組件對(duì)象

三、$nextTick異步更新DOM

• $nextTick原地返回Promise對(duì)象

原因:Vue更新DOM是異步的

    -----html部分<p ref="myp">{{ count }}</p><button @click="btn">點(diǎn)擊count+1,馬上提取p標(biāo)簽的內(nèi)容</button>-------js部分btn() {this.count++//vue檢測(cè)數(shù)據(jù)更新,開啟一個(gè)DOM更新隊(duì)列(異步任務(wù))//vue更新dom是異步代碼console.log(this.$refs.myp.innerHTML);//0(還是默認(rèn)data定義的0)}

等DOM更新后, 觸發(fā)此方法里函數(shù)體執(zhí)行

• 語(yǔ)法: this.$nextTick(函數(shù)體)

btn() {this.count++//vue檢測(cè)數(shù)據(jù)更新,開啟一個(gè)DOM更新隊(duì)列(異步任務(wù))//vue更新dom是異步代碼// console.log(this.$refs.myp.innerHTML);//0//解決方法 DOM更新完會(huì)挨個(gè)觸發(fā)$nextTick里的函數(shù)體this.$nextTick(() => {console.log(this.$refs.myp.innerHTML);//})
}

擴(kuò)展 可采用await 取代回調(diào)函數(shù)

	async btn() {//擴(kuò)展 await取代回調(diào)函數(shù)//$nextTick函數(shù) 原地返回Promise對(duì)象await this.$nextTick()console.log(this.$refs.myp.innerHTML)}

四、組件name屬性的使用

組件name可用作注冊(cè)組件名字

• 1. 組件定義name屬性和值
  
• 2.注冊(cè)組件可用上面name的值