Vue中ref和 refs學習筆記

2021-09-29 18:20:09 字數 769 閱讀 8249

js中需要通過document.queryselector("#demo")來獲取dom節點,然後再獲取這個節點的值。在vue中,我們不用獲取dom節點,元素繫結ref之後,直接通過this.$refs即可呼叫,這樣可以減少獲取dom節點的消耗。

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

通俗的講,ref特性就是為給元素或子元件賦予乙個id引用,通過this.$ref.refname來訪問元素或子元件的例項。

hello

this.$refs.p

this.$refs.children

this.$refs簡介

this.$refs是乙個物件,持有當前元件註冊過ref特性的所有dom元素和子元件例項。

注意:$refs只有在元件渲染完成後才填充,在初始渲染的時候不能訪問他們,並且它是非響應式的,因此不能用他在模板中資料繫結。

注意:當ref和v-for一起使用時,獲取到的引用將會是乙個陣列,包含迴圈陣列源。

}

例項:通過ref特性呼叫子元件的方法

子元件code:

}

父元件code:

Vue 中的 ref 和 refs 的使用

在vue中一般很少直接操作dom,如果需要操作dom,我們可以通過ref 和 ref來實現。ref 被用來給元素或子元件註冊引用資訊,引用資訊將會註冊在父元件的 refs 物件上,如果是在普通的 dom元素上使用,引用指向的就是 dom 元素,如果是在子元件上,引用就指向元件的例項。當在子元件或者d...

vue之 ref 和 refs的使用

在vue中一般很少直接操作dom,如果需要操作dom,我們可以通過ref 和 ref來實現。ref 被用來給元素或子元件註冊引用資訊,引用資訊將會註冊在父元件的 refs 物件上,如果是在普通的dom元素上使用,引用指向的就是 dom 元素,如果是在子元件上,引用就指向元件的例項。當在子元件或者do...

Vue中ref和 refs的介紹及使用

在j ascript中需要通過document.queryselector demo 來獲取dom節點,然後再獲取這個節點的值。在vue中,我們不用獲取dom節點,元素繫結ref之後,直接通過this.refs即可呼叫,這樣可以減少獲取dom節點的消耗。ref介紹 ref被用來給元素或子元件註冊引用...