Vue 13 使用ref獲取DOM

2021-10-06 12:25:48 字數 468 閱讀 9462

一、知識點部分

ref:被用來給子元件或元素註冊引用資訊,引用資訊將會註冊到父元件的$ref物件上;

通過$refs.***獲取元素/元件

如果在普通的dom上使用,引用的指向就是該dom;

如果在子元件上使用,引用的指向就是子元件的例項;

在模板掛載階段(mounted())可以獲取到dom;

相同屬性名後乙個會覆蓋之前的ref;

$refs相對document.getelementbyid的方法,會減少獲取dom節點的消耗;

ref註冊時間說明:ref是作為渲染結果被建立的,所以在渲染完成之前是無法被獲取到的。$refs不是響應式的,不能用於資料雙向繫結。

二、**部分

vue.component("subcom",)

new vue(

})

Vue使用ref 屬性來獲取DOM

注意,在父元件中可以使用this.refs.屬性名 獲取任何元素的屬性和方法,子元件不可以獲取父元件中的 點選 h1 ref chuandi 中國是偉大的祖國 h1 hr log ref mylog log div template id log div input type button valu...

vue 使用ref獲取DOM元素和元件引用

在vue中可以通過ref獲取dom元素,並操作它,還可以獲取元件裡面的資料和方法。html部分 1 div id 2 input type text value input 的值 ref myinput 3 h3 id h3 ref myh3 這是h3 h3 45 hr 6 com1 ref myc...

VUE參考 ref獲取元件

ref屬性可以給元件使用,獲取的元件可以呼叫元件的方法,比如 this.refs.mylogin.show div id input type button value 獲取元素 click getelement ref mybtn h3 id myh3 ref myh3 哈哈哈,今天天氣太好了!h...