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

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

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

获取的 this.$refs.seamlessScroll

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

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

阅读 253
评论
    3 个回答

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

      • 2.8k

      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),这时候就会出现可能的不一致

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章