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！