vue里ref ($refs)用法

「爱情、让人受尽委屈。」 2022-11-20 09:44 196阅读 0赞

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

> [ref 官网API ： https://cn.vuejs.org/v2/api/\#ref][ref _API _ https_cn.vuejs.org_v2_api_ref]  
> [$refs 官网API : https://cn.vuejs.org/v2/api/\#vm-refs][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>

打印结果：  
![打印结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]

##### 注意： #####

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

### 2. 子组件 ###

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

> [访问子组件实例或子元素官方文档][Link 1]

官网示例：实现父级组件调用方法聚焦 < 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>

打印结果:  
![打印结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 1]

##### 注意： #####

1.  $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

[ref _API _ https_cn.vuejs.org_v2_api_ref]: https://cn.vuejs.org/v2/api/#ref
[refs _API _ https_cn.vuejs.org_v2_api_vm-refs]: https://cn.vuejs.org/v2/api/#vm-refs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ad19e9db21cf4056837f52414de33838.png
[Link 1]: https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/1d85b7942a214d439d22a28e31a3a60f.png