資訊專欄INFORMATION COLUMN
摘要：你可以下面的鏈接來(lái)看看這個(gè)組件的實(shí)現(xiàn)代碼以及演示在線演示總結(jié)當(dāng)期望獲得子元素或者子組件的引用時(shí)，切記使用和來(lái)解決問(wèn)題。
05 使用 $refs 訪問(wèn)子組件引用 目標(biāo)
在之前的文章中，詳細(xì)闡述了子組件獲取父組件所提供屬性及方法的一些解決方案，如果我們想在父組件之中訪問(wèn)子組件的一些方法和屬性怎么辦呢？設(shè)想以下一個(gè)場(chǎng)景：
當(dāng)前的 custom-button 組件中，有一個(gè) input 元素
我們期望當(dāng) toggle 的開(kāi)關(guān)狀態(tài)為開(kāi)時(shí)，顯示 input 元素并自動(dòng)獲得焦點(diǎn)
這里要想完成目標(biāo)，需要獲取某個(gè)組件或者每個(gè)元素的引用，在不同的 mvvm 框架中，都提供了相關(guān)特性來(lái)完成這一點(diǎn)：
angularjs: 可以使用依賴注入的 $element 服務(wù)
Angular: 可以使用 ViewChild、ContentChild 或者 template ref 來(lái)獲取引用
react: 使用 ref 屬性聲明獲取引用的邏輯
在 vue 中，獲取引用的方法與 react 類似，通過(guò)聲明 ref 屬性來(lái)完成。
實(shí)現(xiàn)首先，在 custom-button 組件中增加一個(gè) input 元素，如下：
注意這里的 ref="input"，這樣在組件內(nèi)部，可以通過(guò) this.$refs.input 獲得該元素的引用，為了實(shí)現(xiàn)目標(biāo)中提及的需求，再添加一個(gè)新的方法 focus 來(lái)使 input 元素獲取焦點(diǎn)，如下：
focus() {
this.$nextTick(function() {
this.$refs.input.focus();
});
},
注意這里的 this.$nextTick，正常情況下，直接調(diào)用 input 的 focus 方法是沒(méi)有問(wèn)題的，然而卻不行。因?yàn)?input 的渲染邏輯取決于 prop 屬性 on 的狀態(tài)，如果直接調(diào)用 focus 方法，這時(shí) input 元素的渲染工作很可能還未結(jié)束，這時(shí) this.$refs.input 所指向的引用值為 undefined，繼續(xù)調(diào)用方法則會(huì)拋出異常，因此我們利用 this.$nextTick 方法，將調(diào)用的邏輯延遲至下次 DOM 更新循環(huán)之后執(zhí)行。
同理，在 app 組件中，為 custom-button 添加一個(gè) ref 屬性，如下:
之后修改 onToggle 方法中的邏輯以滿足目標(biāo)中的需求，當(dāng) toggle 組件狀態(tài)為開(kāi)時(shí)，調(diào)用 custom-button 組件的 focus 方法，如下：
onToggle(on) {
if (on) this.$refs.customButton.focus();
console.log("toggle", on);
}
成果
點(diǎn)擊按鈕會(huì)發(fā)現(xiàn)，每當(dāng)開(kāi)關(guān)為開(kāi)時(shí)，input 元素都會(huì)顯示，并會(huì)自動(dòng)獲得焦點(diǎn)。
你可以下面的鏈接來(lái)看看這個(gè)組件的實(shí)現(xiàn)代碼以及演示：
sandbox: 在線演示
github: part-5
總結(jié)當(dāng)期望獲得子元素或者子組件的引用時(shí)，切記使用 ref 和 $refs 來(lái)解決問(wèn)題。文章中所舉例子的交互，在實(shí)際場(chǎng)景中很常見(jiàn)，比如：
當(dāng)通過(guò)一個(gè) icon 觸發(fā)搜索框時(shí)，期望自動(dòng)獲得焦點(diǎn)
當(dāng)表單校驗(yàn)失敗時(shí)，期望自動(dòng)獲得發(fā)生錯(cuò)誤的表單項(xiàng)的焦點(diǎn)
當(dāng)復(fù)雜列表的篩選器展開(kāi)時(shí)，期望第一個(gè)篩選單元獲得焦點(diǎn)
這幾種情況下，都可以使用該模式來(lái)高效地解決問(wèn)題，而不是通過(guò)使用 DOM 中的 api 或者引入 jquery 獲取相關(guān)元素再進(jìn)行操作。
目錄github gist
歡迎關(guān)注公眾號(hào) 全棧101，只談技術(shù)，不談人生
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98536.html
摘要：寫(xiě)在前頭去年，曾經(jīng)閱讀過(guò)一系列關(guān)于高級(jí)組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級(jí)組件模式的文章，碰巧最近接手了一個(gè)公司項(xiàng)目，前端這塊的技術(shù)棧是。同時(shí)這個(gè)組件還擁有一個(gè)屬性，用來(lái)初始化的狀態(tài)值。 寫(xiě)在前頭 去年，曾經(jīng)閱讀過(guò)一系列關(guān)于高級(jí) react 組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級(jí) angular 組件模式的文章，碰巧最近接手了一個(gè)公...
摘要：之后再引入該指令，如下之后就可以在組件的模板中使用該指令了，比如一切都將按預(yù)期中運(yùn)行，當(dāng)組件的狀態(tài)為開(kāi)時(shí)，組件的根元素會(huì)增加一個(gè)的內(nèi)容增強(qiáng)屬性。到后來(lái)興起了組件化開(kāi)發(fā)的開(kāi)發(fā)思想，指令似乎是隨著的沒(méi)落而消失了蹤影。 06 通過(guò) directive 增強(qiáng)組件內(nèi)容 目標(biāo) 之前的五篇文章中，switch 組件一直是被視為內(nèi)部組件存在的，細(xì)心的讀者應(yīng)該會(huì)發(fā)現(xiàn)，這個(gè)組件除了幫我們提供開(kāi)關(guān)的交互以外...
摘要：在中，我們是否也有一些手段或特性來(lái)提高組件的復(fù)用程度和靈活性呢答案當(dāng)然是有的，那就是。成果通過(guò)實(shí)現(xiàn)，我們成功將注入的邏輯抽離了出來(lái)，這樣每次需要共享組件的狀態(tài)和方法時(shí)，混入該即可。 03 使用 mixin 來(lái)增強(qiáng) Vue 組件 目標(biāo) 之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個(gè)子組件，且一切運(yùn)行良...
摘要：編寫(xiě)復(fù)合組件目標(biāo)我們需要實(shí)現(xiàn)的需求是能夠使使用者通過(guò)組件動(dòng)態(tài)地改變包含在它內(nèi)部的內(nèi)容。成果通過(guò)復(fù)合組件的方式，我們將組件劃分為了三個(gè)更小的職責(zé)更加單一的子組件。 02 編寫(xiě)復(fù)合組件 目標(biāo) 我們需要實(shí)現(xiàn)的需求是能夠使使用者通過(guò) 組件動(dòng)態(tài)地改變包含在它內(nèi)部的內(nèi)容。 熟悉 vue 的童鞋可能馬上會(huì)想到不同的解決方案，比如使用 slot 并配合 v-if，我們這里采用另外一種方法，利用 vu...
摘要：在中，這種類型的組件也可以叫做函數(shù)式組件。這種組件和普通組件相比的優(yōu)勢(shì)主要在于，它是無(wú)狀態(tài)的，這意味著它的可測(cè)試性和可讀性更好，同時(shí)一些情況下，渲染開(kāi)銷也更小。 09 使用 Functional 組件 目標(biāo) 到此為止，我們的 toggle 組件已經(jīng)足夠強(qiáng)大以及好用了，因此這篇文章不會(huì)再為它增加新的特性。如果你是從第一篇文章一直讀到這里的讀者，你一定會(huì)發(fā)現(xiàn)，整篇文章中，我?guī)缀鯖](méi)有對(duì) to...
閱讀 2616·2023-04-25 22:09
閱讀 2846·2021-10-14 09:47
閱讀 1950·2021-10-11 11:10
閱讀 2694·2021-10-09 09:44
閱讀 3391·2021-09-22 14:57
閱讀 2505·2019-08-30 15:56
閱讀 1625·2019-08-30 15:55
閱讀 786·2019-08-30 14:13
