我們都知道原生JS獲取DOM元素是很麻煩的,需要用到如document.getElementById這么長的API來獲取。
于是vue可以幫我們解決這個問題,vue也有自帶的獲取DOM方法,那就是ref。它不僅可以獲取DOM元素還可以獲取組件。
首先,需要用ref來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如圖所示:
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
通過vue實例的$refs屬性可以拿到這個dom元素:
在使用 v-for 循環(huán)的元素上使用 ref 注冊的元素,使用 this.$refs.xxx 獲取時會返回一個實例集合。
如果用在子組件上,引用就指向組件實例。
通過vue實例的$refs屬性拿到這個組件的引用,之后可以通過這個引用調(diào)用子組件的方法,或者獲取子組件的數(shù)據(jù)。如圖:
上一篇: 利用迅睿cms做一個選項卡切換(下)