你應(yīng)該學過jquery吧蚀苛,沒用vue之前硕噩,我前端框架是用JS+Jquery+Bootstrap,因為不是數(shù)據(jù)驅(qū)動米间,為了獲取某些元素的value,我常常會使用Jquery.
萬能的JQ
$("#id").text('xxx') // 使用Jquery
document.getElementById("id") // 使用原生Dom
現(xiàn)在我們牛逼了膘侮,我們用vue屈糊。那vue中,如果我要獲取Dom琼了,該怎么做逻锐?
這就進入本文的主題ref, $refs,官網(wǎng)解釋:
官網(wǎng)解釋
下面用兩個例子來深入理解ref和refs
一、ref作用于組件
<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);
}
})
通過ref和refs,父組件可以輕松獲取子組件的信息盏档。很簡單!
二凶掰、ref作用于Html標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p ref="thisP">{{name}}</p></div>
<script>
var vm = new Vue({
data:{
name:'小小陳先森'
}
}).$mount("#app")
// vm.name='Tom';
console.log(vm.$refs.thisP.textContent);
//vm.$nextTick(function () {
// console.log(vm.$refs.thisP.textContent);
//})
</script>
</body>
</html>
上面這個例子可以獲取P標簽中的文本信息。這樣就不需要給P標簽設(shè)一個id妆丘,再document.getElementById('xx)锄俄,這相當麻煩。
三勺拣、$nextTick()
<script>
var vm = new Vue({
data:{
name:'小小陳先森'
}
}).$mount("#app")
vm.name='Tom';
console.log(vm.$refs.thisP.textContent);
vm.$nextTick(function () {
console.log(vm.$refs.thisP.textContent);
})
</script>
控制臺顯示
看控制臺輸出奶赠,明明給name賦值‘Tom’,為啥還會打印出‘小小陳先森’药有。name賦值‘Tom’沒錯毅戈,但更新到Dom這個過程是異步的(根本原因是因為Vue中DOM更新是異步的).
所以當你打印console.log(vm.$refs.thisP.textContent);時,此時標簽的文本內(nèi)容還是‘小小陳先森’愤惰。
但我想獲取Dom更新的數(shù)據(jù)啊苇经,我想獲取到的是'Tom'。怎么辦宦言?
使用Vue.nextTick()
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)扇单。在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的 DOM.
this.$nextTick(() => {
console.log(vm.$refs.thisP.textContent);
})