Vue中ref的作用???

2021-10-25 22:24:33 字數 741 閱讀 3848

在沒有學習vue之前,我們實現直接操作頁面上的dom元素都是通過js/jquery,因為jquery對dom元素的操作非常的方便 但是學習了vue之後 就比jquery更方便

所以它的作用是什麼呢?

ref在vue中是用來給元素或是子元件註冊引用資訊到父元件或是 vue例項上,註冊後的引用資訊都會呈現在父元件/vue例項的 (.re

fs)上

,這時,

我們就可

以通過(

.refs) 上,這時,我們就可以通過(

.refs)

上,這時

,我們就

可以通過

(.refs) 獲取到引用的 dom 物件或是子元件資訊。

例如,我們可以獲取到頁面上新增了 ref 的input輸入框的值,對於子元件來說,我們可以直接獲取到子元件data 選項中的資料,或是直接呼叫子元件的方法。

js**

var vm = new vue(,

beforemount() ,

mounted() ,

methods:

}});

執行**,從結果中可以看到,在beforemount 這個鉤子函式中,我們是無法獲取到這個dom 元素的值,結合之前學習的 vue 生命週期的相關知識,當執行到beforemount 鉤子函式時,vue雖然已經將模板編譯完成,但是尚未掛載到頁面 dom 元素上,還只是掛載在虛擬dom上,因此我們可以得出 ref是在頁面渲染完成後才被建立的。

vue中ref的用法

1 ref加在普通元素上,用this.refs.refname獲取dom元素 定義的mycomponent.vue 邊界值練習 data 在methods中 clickf 2 加在子元件上,使用this.refs.refname獲取元件例項,可以使用元件的所有方法和變數 子元件在父元件中被呼叫 提交...

Vue中ref的使用

在沒有學習vue之前,我們實現直接操作頁面上的dom元素都是通過js jquery,因為jquery對dom元素的操作非常的方便。但是學習了vue之後,對dom的操作完全交給vm了,這個時候手動的獲取dom元素再使用js jquery就沒有那麼方便。於是出現了ref,即ref的功能之一就是獲取dom...

vue中ref的用法

預期 string ref被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 refs物件上。如果在普通的 dom 元素上使用,引用指向的就是 dom 元素 如果用在子元件上,引用就指向元件例項 hellop child component 當v for用於元素或元件的時候,引用資訊將是包...