問題描述

在高仿餓了麼實戰專案中使用v-el指令獲取DOM，但出現下圖的錯誤：

v-el指令

程式碼

template

template

script

script

問題原因：

在Vue2.0中棄用了v-el,v-rel指令

解決方案：

使用ref屬性為元素或元件新增標記，然後通過this.$refs獲取

ref被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的$refs物件上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項；

官網講解：https://cn.vuejs.org/v2/api/#ref

使用rel="menu-wrapper"和rel="food-wrapper"以及this.$els替換為this.$refs後出現下圖問題：

找不到dom

問題起因：

命名規範問題；

解決方案

需要將ref="menu-wrapper"和ref="food-wrapper"改為駝峰命名，即是：

rel="menuWrapper"和ref="foodWrapper"

修改後程式碼：

template

作者：小人物的祕密花園
連結：https://www.jianshu.com/p/6d1c0f82c401
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。