526互联

Vue中的$refs 用法

发布时间 2023-12-22 14:17:55作者: 刘俊涛的博客

Vue中的$refs 用法

Vue中的$refs原理涉及到Vue实例的生命周期、虚拟DOM以及一些底层的JavaScript原理。

  1. Vue实例的生命周期： 当Vue实例被创建时，它会经历一系列的生命周期钩子，包括beforeCreate、created、beforeMount、mounted等。在mounted生命周期钩子中，Vue实例的模板已经渲染到真实的DOM上，此时$refs会被填充。

  2. 模板编译： Vue的模板编译过程将模板转换为渲染函数，这个渲染函数生成虚拟DOM。在编译过程中，识别到有ref属性的元素或组件，Vue会在实例的$refs对象上创建相应的引用。

  3. 虚拟DOM与真实DOM关联： Vue使用虚拟DOM来高效地更新实际的DOM。当模板渲染到真实DOM上后，Vue会建立虚拟DOM与真实DOM的关联关系。这时，ref属性的元素或组件的引用被保存在Vue实例的$refs对象上。

  4. $refs的填充： 在mounted生命周期钩子中，Vue实例的$refs对象已经被填充，可以通过this.$refs访问这些引用。

举个例子，如果有以下模板代码：

<template>
  <div>
    <my-component ref="md"></my-component>
    <button ref="myButton">Click me</button>
  </div>
</template>

在mounted钩子执行后，this.$refs将包含两个引用：md和myButton，分别指向<my-component>组件实例和<button>元素。

总的来说，$refs的原理涉及Vue实例生命周期、模板编译、虚拟DOM和真实DOM的关联过程。这使得我们能够在Vue组件中方便地访问子组件或DOM元素的引用。

举个例子

1703141320455_66ABC850-169A-4118-8302-53B1F6B9ED7B

在Vue中，$refs是一个特殊的对象，用于访问在模板中使用ref属性声明的子组件或DOM元素。而你提到的$refs.md中的.md可能是指某个具体的子组件或者DOM元素的引用。

proxy.$refs.md.$img2Url(pos, res.data): 使用 Vue 中的 $refs 来获取名为 md 的子组件，并调用其 $img2Url 方法，传递位置 (pos) 和上传成功的数据 (res.data)。

proxy.$modal.msgSuccess("上传成功"): 使用 Vue 实例中的 $modal 对象，调用 msgSuccess 方法，显示上传成功的提示消息。

假设你在模板中有这样的代码：

<template>
  <div>
    <my-component ref="md"></my-component>
  </div>
</template>

在这个例子中，$refs.md将会是对<my-component>组件实例的引用。你可以通过这个引用来访问和操作<my-component>组件的属性和方法。

如果你的代码中有其他使用ref属性的元素或组件，那么$refs对象将包含对这些元素或组件的引用，每个引用的键名就是ref属性的值。



欢迎关注公-众-号【TaonyDaily】、留言、评论，一起学习。

公众号

Don’t reinvent the wheel, library code is there to help.

文章来源：刘俊涛的博客

若有帮助到您，欢迎点赞、转发、支持，您的支持是对我坚持最好的肯定(_)