为什么这里的 ref 不用 v-bind:ref or :ref

来源：2-7 轮播图组件的开发

All_Good

2021-07-22

<div class="slider" ref="rootRef">
 </div>

setup () {
    const rootRef = ref(null)
    const { currentPageIndex } = useSlider(rootRef)

    return {
      rootRef,
      currentPageIndex
    }
  }

老师，如果 attribute 设置值，不是要 v-bind吗？如果不设置，就当作一个字符串？

图片描述

老师，早上好。您看，setup() 中 return 出来一个 rootRef，然后 template 中，ref=‘rootref’. 如此以来，template 中的 ref 不是绑定一个动态数据了吗？为什么不是应该就 :ref吗？

谢谢老师指点

写回答

2回答

ustbhuangyi

2021-07-22

你在 setup 函数中定义的 rootRef 变量，在内部执行完 setup 函数后，会赋值给组件实例的 setupState 变量中。

也就是 setupState.rootRef = ref(null)。

然后在组件的 patch 阶段，DOM 挂载完毕后会执行 setRef 函数，它先从 vnode 中拿到 ref 变量，也就是你在模板中定义的 rootRef 字符串，然后根据这个变量修改 setupState.rootRef = vnode.el，也就是对应的 DOM。

这就是为啥你在 mounted 之后可以通过 rootRef.value 访问到 DOM。

这是从源码角度层面的分析，也建议你去学习一下。