只要在vue里訪問元素/子組件损合,就要使用ref注冊引用;
1.訪問子組件實例或者子元素
通過ref給元素或者子組件賦予id引用
<base-input ref="usernameInput"></base-input>
給子組件base-input定義了ref仰挣,可以通過訪問子組件base-input
this.$refs.usernameInput
2.ref和通過id和class訪問元素的區(qū)別
2.1 ref是vue里的方法,更加安全,不會依賴class或者id的樣式變了而影響布局溉愁;
2.2 vue的主要目的是減少dom的操作。減少dom節(jié)點的消耗
3.ref作用:
用來給元素或者子組件注冊引用信息饲趋。引用信息將會注冊給父組件的$refs對象上拐揭。
如果給普通的dom元素使用撤蟆,引用指向的是dom元素;
如果是給子組件使用堂污,引用指向的是子組件的實例家肯;
<div>
<input type="text" ref='input'>
</div>
console.log(this.$refs.input); //<input type='text'>
this.$refs ----- {main: div, input: input}
refs和v-for循環(huán)使用
<ul>
<li v-for="n in 10" :key="n" ref='numbers'>{{n}}</li>
</ul>
console.log(_this.$refs.numbers);//li的數(shù)組(10) [li, li, li, li, li, li, li, li, li, li]