vue中的 ref 和 $refs

你應(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);
  })
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奠旺,一起剝皮案震驚了整個濱河市蜘澜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌响疚,老刑警劉巖鄙信,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異忿晕,居然都是意外死亡装诡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門践盼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鸦采,“玉大人,你說我怎么就攤上這事咕幻±涤伲” “怎么了?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵谅河,是天一觀的道長。 經(jīng)常有香客問我,道長绷耍,這世上最難降的妖魔是什么吐限? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮褂始,結(jié)果婚禮上诸典,老公的妹妹穿的比我還像新娘。我一直安慰自己崎苗,他們只是感情好狐粱,可當我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著胆数,像睡著了一般肌蜻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上必尼,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天蒋搜,我揣著相機與錄音,去河邊找鬼判莉。 笑死豆挽,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的券盅。 我是一名探鬼主播帮哈,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼锰镀!你這毒婦竟也來了娘侍?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤互站,失蹤者是張志新(化名)和其女友劉穎私蕾,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胡桃,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡踩叭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了翠胰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片容贝。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖之景,靈堂內(nèi)的尸體忽然破棺而出斤富,到底是詐尸還是另有隱情,我是刑警寧澤锻狗,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布满力,位于F島的核電站焕参,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏油额。R本人自食惡果不足惜叠纷,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望潦嘶。 院中可真熱鬧涩嚣,春花似錦、人聲如沸掂僵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锰蓬。三九已至幔睬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間互妓,已是汗流浹背溪窒。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留冯勉,地道東北人澈蚌。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像灼狰,于是被迫代替她去往敵國和親宛瞄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容交胚,還有我對于 Vue 1.0 印象不深的內(nèi)容份汗。關(guān)于...
    云之外閱讀 5,050評論 0 29
  • # 傳智播客vue 學習## 1. 什么是 Vue.js* Vue 開發(fā)手機 APP 需要借助于 Weex* Vu...
    再見天才閱讀 3,540評論 0 6
  • 一:什么是閉包?閉包的用處蝴簇? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)杯活。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,601評論 1 52
  • Vue是一款高度封裝的熬词、開箱即用的旁钧、一棧式的前端框架,既可以結(jié)合webpack進行編譯式前端開發(fā)互拾,也適用基于gul...
    Hebborn_hb閱讀 1,089評論 0 31
  • 看了一篇寫金字塔的文章歪今,發(fā)現(xiàn)人們總是在思考它是怎么來的,有多神奇颜矿,但是沒有去注意背景環(huán)境的變化和差異寄猩。 不能說我的...
    變身小魔王閱讀 186評論 0 0