Vue2.0中使用v-el,v-rel出现问题

问题描述

在高仿饿了么实战项目中使用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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

猜你喜欢

转载自blog.csdn.net/heyuqing32/article/details/85075238