欢迎光临万书涛的个人博客

vue中的$refs是什么意思呢?

作者:万书涛  / 日期:2021-09-16 21:21:23 /  来源:本站原创 /   浏览:
摘要
今天在做小程序过程中,遇到this.$refs.share.myFun();这么一段代码,不太明白其中的意思,随即查询相关资料和代码研究,终于知道了这段代码是什么意思了。  
因为小程序中用到了组件,而通过父组件向子组件传递数据我们知道一般是通过props来进行,而如果我们父组件调用子组件中的方法该如何进行呢?答案就是用$refs$refs官方定义如下:
“一个对象,持有注册过ref attribute 的所有 DOM 元素和组件实例”。
这句话看着确实比较拗口,下面通过实例来演示。

首先需要在父组件用到refs的地方注册一下,代码如下:

<share ref="share"></share>

上面代码中的share是一个组件,ref="share"表示注册一个属性share
假设我们在share子组件中的methods有这么一个方法:

shareceshi()
{
console.log('ceshi');
}

因为我们刚才在父组件里通过ref=“share”注册了这个share属性,那么在父组件或者父页面中要调用这个方法,只需要如下操作:

this.$refs.share.shareceshi();

这下应该可以理解官方的意思了,只要在ref注册过属性的元素和实例,那么引用他的父组件就可以通过$refs来调用这个组件对象下的方法和属性,也就是我们上面例子中,通过this.$refs.share.shareceshi()直接调用子组件中的shareceshi方法。
 
所属分类: 暂无分类
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/wxxcx/264.html
如需转载,须以文字形式注明本文地址,否则禁止转载

猜你喜欢

无相关信息