Vue中的 ref 和 $refs
生活随笔
收集整理的這篇文章主要介紹了
Vue中的 ref 和 $refs
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
官網解釋：
ref 被用來給DOM元素或子組件注冊引用信息。引用信息會根據父組件的 $refs 對象進行注冊。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子組件上，引用信息就是組件實例
注意：只要想要在Vue中直接操作DOM元素，就必須用ref屬性進行注冊
下面用兩個例子來深入理解ref和refs
一、ref作用于組件
<div id="app"><navbar ref="navbar"></navbar><pagefooter ref="pagefooter"></pagefooter> </div> new Vue({el:'#app',mounted:function () {//ready,//這里怎么直接訪問navbar的navs和pagefooter的footer值呢，這就用到ref了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標簽設一個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);時，此時標簽的文本內容還是‘小小陳先森’。
但我想獲取Dom更新的數據啊，我想獲取到的是’Tom’。怎么辦？
使用Vue.nextTick()
在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM.
this.$nextTick(() => {console.log(vm.$refs.thisP.textContent);}總結
以上是生活随笔為你收集整理的Vue中的 ref 和 $refs的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Postman高级使用——Tests 断
- 下一篇： JS 如何快速高效的将数组转换成树形结构