写点什么

Vue 组件通信之 ref

用户头像
Augus
关注
发布于: 19 分钟前
Vue组件通信之ref

亲爱的八月终于到来了,我早已抑制不住内心的激动,今天我就为我的更文系列打响我的第三枪。废话不多说,进正题。

前言

都说开发前,都要好好思考整体的代码结构,每个模块的分工,内部的数据都要想好,才开始下键盘。而我呢也是这么干的,但总归还是年轻,导致自己的是屎山越来越复杂。不过从中也汲取了一些经验,也想到了一些骚操作,那就是 ref 的 ref。

那什么是 ref 呢?

有些时候我们需要访问子组件或者子元素,这个时候我们就可以通过 ref 属性给组件一个 ID 访问。列如


<b-input ref="bInput"></b-input>
复制代码


定义好后,我们就可以在 Javascript 中使用:


this.$refs.bInput
复制代码


来访问了。


比如访问子组件的方法:


this.$refs.bInput.fun()
复制代码


来访问了。


当 ref 和 v-for 一起使用的时候,你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。


$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。


所以如果你的组件是通过 v-if来控制的话,你就需要等到相应的组件渲染完成之后再调用 $refs, 这个时候就用用到 $nextTick。列如:


this.$nextTick(() => {    this.$refs.bInput.fun()});
复制代码


或者通过v-show来控制组件的显隐。

访问后代组件

上文说到通过 ref 可以访问子组件。那如果我们想要访问后代组件呢?那该如何实现。


既然能通过 ref访问子组件,子组件也能通过 ref 访问后代组件。那访问后代组件是不是通过


this.$refs.id.$refs 来访问呢?结果是必然的。


<parent>     <son ref = "son">        <grandson ref = "grandson"></grandson>    </son></parent>
复制代码


在 parent 组件中我们就可以通过:


    this.$refs.son.$refs.grandson
复制代码


来访问 grandson中的事件了。


当然这仅作为一个用于直接操作子组件的“逃生舱”——应该避免在模板中访问 $refs


End!

用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
Vue组件通信之ref