概述

我们可以在网页的文档对象模型dom的元素中定义ref属性js访问底层dom元素的功能。模板引用可以使我们访问到dom元素。ref是个特殊的属性，它能够在组件被挂载后获取组件的引用。

访问模板引用

在js代码中声明一个ref对象，然后在dom元素的ref属性中填写该ref对象名，这样这个ref对象在vue组件挂载完成后，就直接是该dom元素的引用了。代码例子如下：

v-for循环中的模板引用

在for循环中可以向上面一样在dom元素的ref属性处制定一个ref对象，该ref对象需要在js中声明为一个数组，数组中的每一项就是for循环中每一个dom元素的引用。ref数组对象中的元素顺序和dom的顺序可能不一样。

vue自定义组件上的ref

如果ref属性是在自定义的组件上，则ref对象是该vue组件的引用。如果ref属性在web组件上，则ref对象是web组件的引用。

引用的如果是vue组件，则ref对象可以访问到子组件的任何属性。如果子组件是setup组合式则子组件需要向外暴露js对象，暴露的js对象才能被ref对象引用。