关于 vue $refs 获取组件 this 指向的疑问

mikechen
  • 499

在使用 vue-seamless-scroll 组件的时候发现
父级页面 使用

<vue-seamless-scroll ref="seamlessScroll"><vue-seamless-scroll>

获取的 this.$refs.seamlessScroll

和在源码 mounted 打印的 this 竟然不一样...

是我理解错两个定义了吗 不应该是指向同一个组件吗,懵了 求大佬~~

回复
阅读 515
3 个回答

求大佬解释下这个问题 我其他自定义的组件打印的 this 指向都是一样的 uid 也一样 ,
有没有大佬研究过他的源码的 在线等!

this.$refs.seamlessScroll指向的是vue-seamless-scroll这个组件实例,如果添加到DOM元素上,则指的是该DOM元素,与this是不一样的,详见vm.$refs用法

image.png

大概解释一下这个图,同一个组件被引用了2次, 上面两个 log 是 组件内部的 this
下面两个 log 是分别用 ref 打印的 this

_uid 有2份

我想表达的是: uid 是在组件挂载时生成的, 如果组件只挂载一次 显然 组件内部 this 跟外部 ref 调用是一致的,此时指向同一个组件

但是,当组件被多次挂载,每次都是一个新的实例(新的 _uid),这时候就会出现可能的不一致

你知道吗?

宣传栏