【Vue】vue+typescript项目中用this.$refs和原生方法获取的dom有什么区别

• Z时代
• 2024-01-10
• 分类：技术分享

项目中使用vue+typescript
使用this.$refs.refsName和document.querySelector打印出来的结果是一样的

但是当使用API是。$refs获得的DOM就报错：请问是需要在ts项目中添加什么ts相关的配置吗？

Property 'getBoundingClientRect' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'getBoundingClientRect' does not exist on type 'Vue'.
any

    let el = this.$refs.refsName
console.log('el:', el);
let element = document.querySelector('.content-box')
console.log('element:', el);
console.log(element['style'].width)
// 1.element 调用API正常
console.log(window.getComputedStyle(element).width)
console.log(element.getBoundingClientRect())
// 2.el 调用报错
// Property 'getBoundingClientRect' does not exist on type 'Vue | Element | Vue[] | Element[]'.Property 'getBoundingClientRect' does not exist on type 'Vue'.any
// console.log(el.getBoundingClientRect())
// console.log(window.getComputedStyle(el).width)

知道了，要把let el = this.$refs.refsName改为：let el: any = this.$refs.refsName，定义一个类型

回答

typescript 是强类型语言 你这属于 类型不明确的问题

this.$refs.refsName在类型定义上，并没有getBoundingClientRect的方法定义，所以你调用的时候会报类型错误。
再比如我们项目中有人这样定义：

let ctrlLayout: Object= undefined;
ctrlLayout = {
   options: {}
}

然后我们动态去options中添加属性的时候：

ctrlLayout.options.id = "field1";

就会报同样的错误了，因为Object并没有关于options.id的定义。
所以这个时候改成let ctrlLayout: any= undefined;就可以了。

以上是 【Vue】vue+typescript项目中用this.$refs和原生方法获取的dom有什么区别 的全部内容， 来源链接： utcz.com/a/76864.html