Vue组件通讯之ref｜8月更文挑战

亲爱的八月终于到来了，我早已抑制不住心里的激动，今天我就为个人31天更文打响个人第一枪。废话很少说，进正题。

前言

都说开发前，都要好好思考总体的代码结构，每一个模块的分工，内部的数据都要想好，才开始下键盘。而我呢也是这么干的，但总归仍是年轻，致使本身的是屎山愈来愈复杂。不过从中也汲取了一些经验，也想到了一些骚操做，那就是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！