今天在做小程序过程中,遇到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方法。
点赞作者()