Vue中的$refs 用法
Vue中的$refs 用法
Vue中的$refs
原理涉及到Vue实例的生命周期、虚拟DOM以及一些底层的JavaScript原理。
-
Vue实例的生命周期: 当Vue实例被创建时,它会经历一系列的生命周期钩子,包括
beforeCreate
、created
、beforeMount
、mounted
等。在mounted
生命周期钩子中,Vue实例的模板已经渲染到真实的DOM上,此时$refs
会被填充。 -
模板编译: Vue的模板编译过程将模板转换为渲染函数,这个渲染函数生成虚拟DOM。在编译过程中,识别到有
ref
属性的元素或组件,Vue会在实例的$refs
对象上创建相应的引用。 -
虚拟DOM与真实DOM关联: Vue使用虚拟DOM来高效地更新实际的DOM。当模板渲染到真实DOM上后,Vue会建立虚拟DOM与真实DOM的关联关系。这时,
ref
属性的元素或组件的引用被保存在Vue实例的$refs
对象上。 -
$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元素的引用。
举个例子
在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.
文章来源:刘俊涛的博客
若有帮助到您,欢迎点赞、转发、支持,您的支持是对我坚持最好的肯定(_)
你要保守你心,胜过保守一切。
本文来自博客园,作者:刘俊涛的博客,转载请注明原文链接:https://www.cnblogs.com/lovebing/p/17921486.html