在typeScript+vue项目中使用ref

Posted 2021-02-04 sixrookie

因为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)

这样就好了，我喜欢这样，因为非常简单我可以理解。

 

 

另：百度和谷歌搜索出来的内容真心一个天一个地。