Vue2中ref屬性的用法
Vue2中ref屬性的用法
最近寫東西遇到了莫名其妙的問題,用ref屬性原以為它會獲得一個數組http://www.jianshu.com/p/05c863ec2a23
-
// html
-
<ul>
-
<li ref="refCon">1</li>
-
<li ref="refCon">2</li>
-
</ul>
-
// js
-
created: function() {
-
this.$nextTick(() => {
-
console.log(this.$refs.refCon)
-
// 列印結果:<li>2</li> 本以為會獲得一個數組
-
})
-
}
後來去看了下文件才搞明白orz。(沒仔細看文件的鍋
js01.png
這下就明白了
-
// html
-
<ul>
-
<li v-for="item in people" ref="refContent">{{item}}</li>
-
</ul>
-
// js
-
data: {
-
people:['三姑','四嬸','五叔','六姨','七舅姥爺']
-
},
-
created: function() {
-
this.$nextTick(() => {
-
console.log(this.$refs.refContent)
-
})
-
}
js02.png
以及一定要注意
-
// js
-
data: {
-
people:['三姑','四嬸','五叔','六姨','七舅姥爺']
-
},
-
created: function() {
-
console.log(this.$refs.refContent)
-
// undefined
-
}
-
<div id="app">
-
<navbar></navbar>
-
<pagefooter></pagefooter>
-
</div>
-
Vue.component('navbar',{
-
template:'#navbar',
-
data:function () {
-
return {
-
navs:[]
-
}
-
}
-
});
-
Vue.component('pagefooter',{
-
template:'#pagefooter',
-
data:function () {
-
return {
-
footer:''
-
}
-
}
-
});
-
new Vue({
-
el:'#app',
-
mounted:function () {
-
//ready,
-
//這裡怎麼直接訪問navbar的navs和pagefooter的footer值呢,
-
}
-
})
這就用到ref了
修改元件
-
<div id="app">
-
<navbar ref="navbar"></navbar>
-
<pagefooter ref="pagefooter"></pagefooter>
-
</div>
-
new Vue({
-
el:'#app',
-
mounted:function () {
-
//ready,
-
//這裡怎麼直接訪問navbar的navs和pagefooter的footer值呢,
-
console.log(this.$refs.navbar.navs);
-
console.log(this.$refs.pagefooter.footer);
-
}
-
})
如果僅僅用到一個普通標籤上
<div ref="demo"></div>
他的作用和:
document.querySelector('[ref=demo]');
的作用一樣