一、根據(jù)官方文檔總結(jié)的用法：
看Vue.js文檔中的ref部分枝秤，自己總結(jié)了下ref的使用方法以便后面查閱。
1卿嘲、ref使用在外面的組件上
HTML 部分
<div id="ref-outside-component" v-on:click="consoleRef">
<component-father ref="outsideComponentRef">
</component-father>
<p>ref在外面的組件上</p>
</div>
js部分
var refoutsidecomponentTem={
template:"<div class='childComp'><h5>我是子組件</h5></div>"
};
var refoutsidecomponent=new Vue({
el:"#ref-outside-component",
components:{
"component-father":refoutsidecomponentTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-component vue實(shí)例
console.log(this.$refs.outsideComponentRef); // div.childComp vue實(shí)例
}
}
});
2颂斜、ref使用在外面的元素上
HTML部分
<!--ref在外面的元素上-->
<div id="ref-outside-dom" v-on:click="consoleRef" >
<component-father>
</component-father>
<p ref="outsideDomRef">ref在外面的元素上</p>
</div>
JS部分
var refoutsidedomTem={
template:"<div class='childComp'><h5>我是子組件</h5></div>"
};
var refoutsidedom=new Vue({
el:"#ref-outside-dom",
components:{
"component-father":refoutsidedomTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-dom vue實(shí)例
console.log(this.$refs.outsideDomRef); // <p> ref在外面的元素上</p>
}
}
});
3、ref使用在里面的元素上---局部注冊(cè)組件
HTML部分
<!--ref在里面的元素上-->
<div id="ref-inside-dom">
<component-father>
</component-father>
<p>ref在里面的元素上</p>
</div>
JS部分
var refinsidedomTem={
template:"<div class='childComp' v-on:click='consoleRef'>" +
"<h5 ref='insideDomRef'>我是子組件</h5>" +
"</div>",
methods:{
consoleRef:function () {
console.log(this); // div.childComp vue實(shí)例
console.log(this.$refs.insideDomRef); // <h5 >我是子組件</h5>
}
}
};
var refinsidedom=new Vue({
el:"#ref-inside-dom",
components:{
"component-father":refinsidedomTem
}
});
4拾枣、ref使用在里面的元素上---全局注冊(cè)組件
HTML部分
<!--ref在里面的元素上--全局注冊(cè)-->
<div id="ref-inside-dom-all">
<ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>
JS部分
Vue.component("ref-inside-dom-quanjv",{
template:"<div class='insideFather'> " +
"<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
" <p>ref在里面的元素上--全局注冊(cè) </p> " +
"</div>",
methods:{
showinsideDomRef:function () {
console.log(this); //這里的this其實(shí)還是div.insideFather
console.log(this.$refs.insideDomRefAll); // <input type="text">
}
}
});
var refinsidedomall=new Vue({
el:"#ref-inside-dom-all"
});
二沃疮、應(yīng)注意的坑
1、如果通過(guò)v-for 遍歷想加不同的ref時(shí)記得加 :號(hào)梅肤，即 :ref =某變量 ;
這點(diǎn)和其他屬性一樣司蔬，如果是固定值就不需要加 :號(hào)，如果是變量記得加 :號(hào)
image.png
2姨蝴、通過(guò) :ref =某變量 添加ref（即加了:號(hào)） ,如果想獲取該ref時(shí)需要加 [0]俊啼，如this.$refs[refsArrayItem] [0]；如果不是:ref =某變量的方式而是 ref =某字符串時(shí)則不需要加左医，如this.$refs[refsArrayItem]
加和不加[0]的區(qū)別--未展開(kāi)
加和不加[0]的區(qū)別--展開(kāi)了
3授帕、想在element ui 對(duì)話框打開(kāi)后取dom時(shí)，應(yīng)該使用$nextTick浮梢，而不是直接使用this.$refs. imgLocal2：
console.log('this.$refs.imgLocal2外面', this.$refs.imgLocal2);
setTimeout(() => {
console.log('this.$refs.imgLocal2 setTimeout', this.$refs.imgLocal2);
}, 500); // 不推薦
this.$nextTick(() => {
console.log('this.$refs.imgLocal2 $nextTick', this.$refs.imgLocal2);
});
結(jié)果
**本文版權(quán)歸本人即簡(jiǎn)書(shū)筆名：該賬戶已被查封 所有跛十，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝秕硝！ *
