• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

在typeScript+vue项目中使用ref

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

因为vue项目是无法直接操作dom的,但是有时候开发需求迫使我们去操作dom。

两个办法,一个是很low的再引入jq,然后通过jq来操作,但是这样就失去了我们使用vue的意义, 可惜的是我曾经这样干过,而且当时觉得我就是个天才。

另一个就是添加ref属性,对ref进行操作。

好了完美解决。

很不巧,新项目用的是vue还是vue+typeScript的,直接,单纯的this.$refs.xxx不好用了,报错,识别不了,很尴尬。

经过不懈努力终于找到了在typeScript+vue(不要在意这两个前后顺序,是哪个意思就行)项目中使用ref的解决办法(typeScript项目中能使用JQ吗?):

添加一个声明类型,例如:

this.$refs.ceshiREF as HTMLAudioElement
这样是不报错了,但是打印的结果却是undefined,有点不讲道理的感觉。
后来在一片博客中发现ref不是响应式的,无法对添加了if的进行反应,而我不巧就添加在了有if判断的标签上面。
此外ref必须要数据渲染之后才能获取到,一般在mounted中。
而且也并不是像上面说的那样需要声明一个类型,而是需要声明一个变量:
let el:any = this.$refs.ceshi;
console.log(el)
这样就好了,我喜欢这样,因为非常简单我可以理解。
 
 
另:百度和谷歌搜索出来的内容真心一个天一个地。
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap