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

2022-05-29 07:42:08 字數 822 閱讀 2189

在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="mycom1"


>


com1


>78


<


button 


@click


="click"


>ref


button


>


9div


>
js部分：

1


//定義乙個元件


2var com1 =8},


9methods: 13}


14}1516


//vue例項


17vue( },


20methods: 


27},


28components: 


31 });
點選 ref 按鈕，得到以下結果：

Vue 13 使用ref獲取DOM

一 知識點部分 ref 被用來給子元件或元素註冊引用資訊，引用資訊將會註冊到父元件的 ref物件上 通過 refs.獲取元素 元件 如果在普通的dom上使用，引用的指向就是該dom 如果在子元件上使用，引用的指向就是子元件的例項 在模板掛載階段 mounted 可以獲取到dom 相同屬性名後乙個會覆...

Vue使用ref 屬性來獲取DOM

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

vue獲取dom元素注意問題

mounted 1000 methods vue想要獲取dom元素的高，一般情況下我們都可以想到寫在mounted函式裡，即dom載入完再獲取，但是結果並不如我們所想，又想到用乙個 this.nexttick 來獲取，發現根本沒用啊 所以好的辦法就是用乙個settimeout定時器，時間可以設為0，...