vue中ref和$refs用法详解

一、基本概念

Vue中的ref用来给元素或子组件注册引用信息，而$refs可以用来获取ref注册过的元素或组件，并调用其方法。

二、基本用法

用法： 子组件上定义ref=“refName”, 父组件的方法中用 this.$refs.refName.method 去调用子组件方法

三、几种情况

1. 当ref用在组件上时，用$refs获取到的的是组件实例。

<template>
 <div id="app">
   <Home ref="test" />
 </div>
</template>

<script>
import Home from './views/Home'
export default {
 components: { Home },
 mounted () {
   console.log(this.$refs.test)
 }
}
</script>

2. 当ref用在dom元素上时，用$refs获取到的的是当前元素。

<template>
  <div id="app">
    <p ref="test">
      <span>123</span>
    </p>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

3. 多处ref引用的值相同时（非v-for内使用时）：当html中ref值相同的节点是兄弟节点时，通过$refs获取到的是文档中顺序靠下的节点

<template>
  <div id="app">
    <p ref="test">
      <span>123</span>
    </p>
    <span ref="test">456</span>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

4. 当ref用在循环中时：
   ref值相同时，this.$refs.refName获取到的是该DOM节点或组件的数组，此处以组件为例

<template>
  <div id="app">
    <Home v-for="num in loop" :key="num" ref="test"></Home>
  </div>
</template>

<script>
import Home from './views/Home'
export default {
  components: { Home },
  data () {
    return {
      loop: 3
    }
  },
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

当ref值不同时，this.$refs[ref名称]无法获取对应的DOM节点或是组件，需要在其后追加[0]才可访问，此处以组件为例

<template>
  <div id="app">
    <Home v-for="num in loop" :key="num" :ref="'test' + num"></Home>
  </div>
</template>

<script>
import Home from './views/Home'
export default {
  components: { Home },
  data () {
    return {
      loop: 3
    }
  },
  mounted () {
    console.log(this.$refs.test1)
  }
}
</script>

总结

1. 如果ref用在普通的DOM元素上，$ refs引用指向的就是DOM元素，如果用在子组件上，$refs引用就指向子组件实例。
2. 当v-for用于元素或组件时，引用信息将会是包含DOM节点或组件实例的数组。
3. 注意关于ref注册时间的重要性：因为ref本身是作为渲染结果被创建的，在初始渲染的时候不能访问他们，还不存在，$refs也不是响应式的，不应该试图用它在模板中做数据绑定。