当我们需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID
<div id="parent">
<p ref="profile" id="profile"></p>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件实例
var child = parent.$refs.profile
console.log(child )// <p ref="profile" id="profile"></p>
这与document.getElementById(“profile”)获取dom节点的作用是一样的,但使用ref会减少获取dom节点的消耗
当 ref 和 v-for 一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。