1. 程式人生 > >vue中ref的用法解析

vue中ref的用法解析

//html

<input type="text" ref="content">

//js

this.$refs.content.focus()

ref 被用來給元素或子元件註冊引用資訊,引用資訊將會註冊在父元件的 $refs 物件上。 如果在普通的dom元素上使用,引用指向的就是dom元素; 如果在子元件上,引用就指向子元件例項。

簡單的說就是用 ref 在元素上註冊, 用$refs去操作。

注:因為ref本身是作為渲染結果被建立的,在渲染初期的時候不能訪問它,它還不存在!
所以可以

this.$nextTick(() => {      //
先渲染dom後執行console this.$refs.content.focus() }

此時就可以輕鬆地獲取到它,並對他進行相應的dom操作了!