在 Vue 2.x 版本中,我們可以使用 ref 指令為一個元素或組件注冊一個引用,在模板或方法中可以通過 this.$refs 訪問到這個引用。但如果我們想要直接訪問某個原生 DOM 元素的屬性或方法,例如 input 的 value 屬性或 focus() 方法,是無法通過 this.$refs.xxx 來實現的。
此時我們需要使用特殊的 ref 修飾符 —— ref 綁定到子組件上的方式來實現對原生 DOM 元素的引用。例如 ref="myInput" 會將其指向子組件實例或 DOM 元素,我們可以通過 ref="myInput" + '.dom' 的方式來訪問到這個元素。
需要注意的是,在使用 ref 綁定到子組件上的方式時,只能保證 DOM 已經渲染完成,但無法保證組件已經 mounted 完成,所以如果需要在父組件中調用子組件方法,建議在子組件的 mounted 鉤子函數中設置 this.$parent.xxx = this。這樣在父組件中就可以通過 this.$refs.xxx 來獲取到子組件實例,從而調用其方法。