vue里ref ($refs)用法-蒲公英云

vue里ref ($refs)用法

在项目里经常用到ref操作DOM元素或者调用子组件的方法（啥也不知道，啥都敢用），但是并不明确ref的原理，通过看官网API和各位大佬的总结终于get啦啦！！做个记录。

ref 官网API ： https://cn.vuejs.org/v2/api/#ref
$refs 官网API : https://cn.vuejs.org/v2/api/#vm-refs

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

1. DOM 元素

在普通的 DOM 元素上使用，引用指向的就是 DOM 元素。

<template>
  <div id="app">
    <ul ref="refUl">
        <li v-for="item in number" ref="refLi">{ { item}}</li>
    </ul>
  </div>
</template>
<script>
    export default { 
      name: 'app',
      data(){ 
          return{ 
              number:['1111','222','3333'],
          }
      },
      created(){ 
          this.$nextTick(()=> { 
              console.log(this.$refs.refLi)
              console.log(this.$refs.refUl)
          })
          console.log(this.$refs.refLi) //undefined
          console.log(this.$refs.refUl) //undefined
      }
    }
</script>

打印结果：

注意：

注册时间说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！
ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。
比如在生命周mounted(){} 钩子中调用，或者在this.$nextTick(()=>{}) 中调用。
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。
（简单理解：如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。）

2. 子组件

如果用在子组件上，引用就指向组件实例。

访问子组件实例或子元素官方文档

官网示例：实现父级组件调用方法聚焦 < helloWorld >里的输入框
父组件

<template>
  <div id="app">
    <HelloWorld ref="helloWorld"/>
  </div>
</template>
<script>
    import HelloWorld from './components/HelloWorld.vue'
    export default { 
      name: 'app',
      components: { 
        HelloWorld
      },
      created(){ 
        this.$nextTick(()=> { 
            console.log(this.$refs.helloWorld)
            this.$refs.helloWorld.focus()
        })
      }
    }
</script>

子组件

<template>
  <div class="hello">
    <input ref="input">
  </div>
</template>
<script>
    export default { 
      methods: { 
        // 用来从父级组件聚焦输入框
        focus: function () { 
            this.$refs.input.focus()
        }
      }
    }
</script>